React Native: передача разных стилей на карту

Question

Я хочу иметь 4 поля, каждое из которых имеет свой цвет, и я хочу сделать это, загружая каждый стиль из map (). Приведенный ниже код не компилируется, я написал его, чтобы вы понимали, что я пытаюсь сделать. Ошибка возникает изнутри View at styles. {Box.name}, я хочу вместо {box.name} поместить элементы массива, чтобы функция могла принимать свойства таблицы стилей.

export default function Imagesfun() {
    const array = [{
        name: "box1",
    },
    {
        name: "box2",
    },
    {
        name: "box3",
    },
    {
        name: "box4",

    },
    {
        name: "box5",
    }]
    return (
        <View style={styles.container}>

            {array.map(box => <Text style={styles.{box.name}} key={box.name}>{box.name}</Text>)}

        </View >
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: "space-around",
        alignContent: "center",
        backgroundColor: 'black',
    },
    box1: {
        backgroundColor: 'lightblue',
    },
    box2: {
        backgroundColor: 'lightred',
    },
    box3: {
        backgroundColor: 'lightyellow',

    },
    box4: {
        backgroundColor: 'lightpurple',

    },
    box5: {
        backgroundColor: 'lightgreen',
    },
});

Answer 1

Попробуйте следующее:

<View style={styles.container}>
  {array.map(box => <Text style={styles.[box.name]} key={box.name}>{box.name}</Text>)}
</View >

Answer 2

Измените {styles.{box.name}} на {styles[box.name]}. Подробнее см. Q & A .