Question

我的组件中有以下render()函数，它复制了表的外观，但在react-native中使用了flex。

<View>
    <View key={ 'test' } style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col1</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col2</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col3</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col4</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col5</Text>
        </View>
    </View>
</View>

完全正常并且符合预期。但是，如果我将backgroundColor: 'green'添加到上面最顶层视图的样式中，那么整个视图就会消失。甚至不能在反应原生的检查员身上看到它。

知道为什么会这样吗？我是否遗漏了一些问题，而不是在嵌套View或其他东西上使用背景颜色？

编辑：这是因为父组件中包含了一个包含我的组件的组件，该组件也必须明确设置flex: 1。不确定为什么只添加backgroundColor会导致这种情况，但我们会去。

Answer 1

你可以试试这个，我想通过设置父视图的高度和宽度来解决问题

<View key={ 'test' } style={{ height: 500, width:500, flexDirection: 'row' }}>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col1</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col2</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col3</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col4</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col5</Text>
        </View>
    </View>

Answer 2

您必须将第一个视图的样式设置为flex: 1

<View style={{flex: 1}}>
    <View key={ 'test' } style={{ flex: 1, flexDirection: 'row', backgroundColor: 'green' }}>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col1</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col2</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col3</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col4</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
            <Text>Col5</Text>
        </View>
    </View>
</View>

在样式中设置`backgroundColor`隐藏了`View`组件

2 个答案: