こけこっこー

がんばる

React Native ElementsのButtonコンポーネントで何故か隙間ができるときの対処法

React Native ElementsのButtonコンポーネントを使っていたところ謎のpadding的な隙間ができて困りました。 こんな感じです。

f:id:monisoi:20180622071332p:plain

  nextButtonWrapper: {
    flex: 1,
    height: '70%',
    backgroundColor: '#CCC3BA',
  },
  nextButton: {
    height: '100%',
    width: '100%',
    backgroundColor: 'steelblue',
  },
const renderNextButton = dispatch => (
  <View style={styles.nextButtonWrapper}>
    <Button onPress={() => dispatch({ type: GO_TO_NEXT_TURN })} title="次へ" buttonStyle={styles.nextButton}/>
  </View>
);

青と灰色をすべて含む部分がViewコンポーネントnextButtonWrapper のスタイルを適用してます。 その中にButtonコンポーネントを入れていて nextButton のスタイルを適用してます。 nextButton はwidth, heightどちらも100%を指定しているので青い部分が灰色の部分まで広がることを期待しています。 つまりボタン押しできる範囲をviewコンポーネントの範囲全体に広げたいのです。

結局Buttonコンポーネントではうまく行かなかったのでReact Nativeの TouchableOpacity を使いました。 TouchableOpacity これで範囲全体をクリックできるようになります。

  nextButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    height: '70%',
    backgroundColor: '#CCC3BA',
  },
const renderNextButton = dispatch => (
  <TouchableOpacity style={styles.nextButton} onPress={() => dispatch({ type: GO_TO_NEXT_TURN })}>
    <Text>次へ</Text>
  </TouchableOpacity>
);