视图不以给定大小呈现

Question

我在使用 expo 的 react-native 时遇到了一个奇怪的问题，正如你在图像上看到的那样，一些渲染元素没有我给它们的宽度和高度，而是一个介于两者之间的随机数（多一点或少一点）。当你有一个简单的列表时这没什么大不了的，但是当你必须显示一个嵌套数组时（见图像），你可能会有奇怪和不需要的空间，你可以清楚地看到边框存在问题。

（全新的空白 expo 项目版本 3.22.3，下面的代码可按预期使用 React Native Web，因此您无法使用 codesandbox 进行重现）

Simple Image

import React from 'react'
import { StyleSheet, View } from 'react-native'

export default function App() {
    const array = [1, 1, 1, 1, 1, 1, 1, 1, 1]

    return (
        <View style={styles.container}>
            {array.map(() => (
                <View style={styles.row} key={Math.random()}></View>
            ))}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    row: {
        borderWidth: 0.5,
        backgroundColor: 'red',
        width: 30,
        height: 30
    }
})

Nested Image

import React from 'react'
import { StyleSheet, View } from 'react-native'

export default function App() {
    const array = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1]
    ]

    return (
        <View style={styles.container}>
            {array.map((row) => (
                <View style={styles.row} key={Math.random()}>
                    {row.map(() => (
                        <View style={styles.column} key={Math.random()}></View>
                    ))}
                </View>
            ))}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    },
    row: {
        flexDirection: 'row'
    },
    column: {
        borderWidth: 0.5,
        backgroundColor: 'red',
        width: 33,
        height: 33
    }
})

所以如果你有任何想法..谢谢！

Answer 1

屏幕截图显示了来自 ExpoRoot 的样式。您需要查看属性 View。一切都正确显示。呈现的元素具有您指定的宽度和高度。

对于第二个问题，我认为这只是在Android模拟器上。如果您在真实设备上构建或测试，应该没问题。

您可以使用 codesandbox 创建一个 react-native 项目并测试代码。

视图不以给定大小呈现

View not rendering with given size

react-native

expo

react-native-android

react-native-ios