Question

我希望每件商品的宽度都是100％。将alignSelf: 'stretch',添加到样式块不起作用。

请查看下面的图片！

我的代码：

<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

问题是你有一个没有flex到flexxed ButtonNav的View父级，所以你的flexs被忽略了，你可以通过删除<View>标签来修复它，如果你出于某种原因需要它们，只需添加一个flex样式属性，我认为这可能有效：

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

</View>

Answer 2

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

} }）

试试这个应该有效

反应原生可以在子元素上设置100％宽度

2 个答案: