react-native - 在 for 循环内使用 <Text> 时的填充/边距

Question

我正在使用 for 循环创建多个 Text，但是当我使用这种方法时，我看到了一些不必要的填充。

render(){
    var child = [];
    for (let index = 0; index < 5; index++) {
        child.push(<Text key={index}> {index}</Text >)
    }

    return (
        <View>
            <View style={{ flexDirection: 'row' }}>
                {child}
            </View>
            <View style={{ flexDirection: 'row' }}>
                <Text>0</Text>
                <Text>1</Text>
                <Text>2</Text>
                <Text>3</Text>
                <Text>4</Text>
            </View>
        </View>
    )
}

输出:

正如您可以观察到的，我通过 for 循环添加的 Text 在两个 Text 之间留有一些空格，但是如果我连续写入 5 次，它就可以工作很好。

Answer 1

此时你错过了一些东西。您的循环中有一个空格。

child.push(<Text key={index}> {index}</Text >)

改成这样

child.push(<Text key={index}>{index}</Text >)