padding/margin 在 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 之间留下了一些 space，但如果我直接写 5 次，它就可以工作很好。

Answer 1

你现在错过了什么。您的循环中有一个 space。

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

改为那个

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

Answer 2

清除{index}之前多余的空格:)

<Text key={index}>{index}</Text >