问题
I am trying to set my button style that way, it will be spread across my View. Currently its creating white border on the left and on the bottom of my button (see attached screenshot).
My code:
let {width, height} = Dimensions.get('window');
let photoWidth = width/4;
return (
<View style={{width: width, height: 500}}>
<ScrollView style={{width: width, height: height}}>
<View style={{flexDirection: 'row', width: width, flexWrap: 'wrap'}}>
{
this.state.photos.map((p, i) => {
return (
<SelectedPhoto
key={i}
index={i}
style={{
width: photoWidth,
height: photoWidth,
}}
limit={this.state.supportLength}
photo={p}
onSelectPhoto={this.onSelectPhoto}
onDeselectPhoto={this.onDeselectPhoto}
/>
);
})
}
</View>
</ScrollView>
<View style={{ flexDirection:"row", flexWrap: 'wrap', width: width }}>
<Button
onPress={this.onNext}
containerViewStyle={{width: width}}
backgroundColor={Colors.red}
title='NEXT' />
</View>
</View>
);
回答1:
I consider Button
component you used from react-native
. Just remove wrapper flex you added as you set width
to it.
<Button
onPress={this.onNext}
containerViewStyle={{width: width}}
backgroundColor={Colors.red}
title='NEXT' />
来源:https://stackoverflow.com/questions/50622943/my-button-isnt-spreading-across-my-container