在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 >)

Answer 2

清除{index}前的多余间距：）

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