React Native ElementsのButtonコンポーネントで何故か隙間ができるときの対処法
React Native ElementsのButtonコンポーネントを使っていたところ謎のpadding的な隙間ができて困りました。 こんな感じです。
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> );