Javascript TouchableOpacity即使设置了宽度也会占用所有可用空间
我跟随这篇文章制作了一个标题如下的按钮:Javascript TouchableOpacity即使设置了宽度也会占用所有可用空间,javascript,react-native,flexbox,Javascript,React Native,Flexbox,我跟随这篇文章制作了一个标题如下的按钮: <View style={styles.sectionHeaderContainer}> <Text style={styles.heading}>Work</Text> <TouchableOpacity style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'cente
<View style={styles.sectionHeaderContainer}>
<Text style={styles.heading}>Work</Text>
<TouchableOpacity
style = {{width: 40, flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}
onPress={() => {
this.setState(previousState => {
Alert.alert('You tapped the button!')
});
}}>
<Image source={addIcon}/>
<Text style={styles.tertirayTitleDark}>Add Work</Text>
</TouchableOpacity>
</View>
sectionHeaderContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-end',
paddingHorizontal: "6%",
paddingTop: "12%",
},
heading: {
fontSize: TITLE,
fontWeight: 'bold',
color: THEME_COLOR,
backgroundColor:'transparent',
},
tertirayTitleDark: {
fontSize: CONTENT_LARGE,
fontWeight: 'bold',
color: COLOR_DARK_PRIMARY,
},
但是,该按钮占用了标题留下的所有可用水平空间:
我尝试了许多不同的设置,但仍然无法找出我在这里做错了什么。只需删除
flex:1
。当您将flex:1
添加到touchableOpacity的样式中时,您正是在告诉它占用所有可用空间,并像提供的图像一样操作。希望这有帮助 只需删除flex:1
。当您将flex:1
添加到touchableOpacity的样式中时,您正是在告诉它占用所有可用空间,并像提供的图像一样操作。希望这有帮助