отступ / отступ при использовании <Text>внутри для цикла

Question

Я создаю несколько Text, используя цикл for, но я видел некоторые ненужные отступы, когда я использую этот подход.

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

Выход:

Как вы можете заметить, Text, который я добавил через цикл for, оставляет некоторое пространство между двумя Text, но если я напишу его 5 раз подряд, он будет работать нормально.

Answer 1

Очистить лишний интервал перед {index}:)

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

Answer 2

Вы что-то упустили в это время. В вашем цикле есть пробел.

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

изменить на это

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