javascript - React Native 无法在子元素上设置 100% 宽度

Question

我希望每个项目都是 100% 宽度。将 alignSelf: 'stretch', 添加到样式 block 不起作用。

请看下面的图片!

How it looks

How it should look

我的代码:

<View>
     <ButtonNav style={
                    this.state.currentTab == 'order'
                    ? styles.currentTab
                    : styles.tabItem
                }
                onPress={this.order}
                tagline="BESTÄLLNING" />

</View>

const styles = StyleSheet.create({
    navWrapper: {
        flexDirection: 'row',
        height: 75,
        alignItems: 'center',
        backgroundColor: '#949494',
        flex: 1
    },
    tabItem: {
        justifyContent: 'center',
        borderWidth: 2,
        borderColor: '#333333',
        flexGrow: 1,
        flex: 1
    },
    currentTab: {
        backgroundColor: '#EEEEEE',
        justifyContent: 'center',
        flexGrow: 1,
        borderTopWidth: 2,
        borderTopColor: '#333333',
        flex: 1
    }
});

Answer 1

问题是您的 View 父级没有 Flexxed ButtonNav 的 Flex，因此您的 Flex 被忽略，您可以通过删除 <View> 来修复它。标签，如果您出于某种原因需要它们，只需为其添加一个 Flex 样式属性，我认为这可能会起作用:

<View style={{flex:1}}>
     <ButtonNav
         style={
             this.state.currentTab == 'order'
             ? styles.currentTab
             : styles.tabItem
         }
         onPress={this.order}
         tagline="BESTÄLLNING" />

</View>