Flex 属性 未应用于 TouchableOpacity

Question

我正在学习 this 教程，但遇到了动态 TouchableOpacity 元素。出于某种原因，flex 属性 没有被应用。当我使用 chrome 的开发工具查看元素时，我可以看到它们，但它们没有 flex 属性。如果我手动添加它，我会得到我想要的外观。

这是 render 片段：

render() {
        const { rgb, size } = this.state;
        const { width } = Dimensions.get('window');

        return (
            <View style={styles.container}>
                <Header fontSize={40} />
                <View
                    style={{
                        height: width * 0.875,
                        width: width * 0.8758,
                        flexDirection: 'row',
                    }}
                >
                    {Array(size)
                        .fill()
                        .map((val, columnIndex) => (
                            <View
                                style={{ flex: 2, flexDirection: 'column' }}
                                key={columnIndex}
                            >
                                {Array(size)
                                    .fill()
                                    .map((val, rowIndex) => (
                                        <TouchableOpacity
                                            key={`${rowIndex}.${columnIndex}`}
                                            style={{
                                                flex: 1,
                                                backgroundColor: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`,
                                                margin: 2,
                                            }}
                                            onPress={() =>
                                                console.log(
                                                    rowIndex,
                                                    columnIndex
                                                )
                                            }
                                        />
                                    ))}
                            </View>
                        ))}
                </View>
            </View>
        );
    }

Answer 1

愚蠢的错误。从错误的包中导入 TouchableOpacity。检查您是否从 react-native

导入