Добавить числа в элемент списка React-native - PullRequest
Новая
       3

Добавить числа в элемент списка React-native

0 голосов
/ 10 июля 2020

У меня есть список ингредиентов, которым я бы хотел добавить нумерацию, чтобы они хотели ....

Шаг 1 ... 1 ½ стакана тертого швейцарского сыра Шаг 2 ... 4 чайные ложки универсальной муки Шаг 3 ... ½ стакана вареной ветчины, нарезанной кубиками Шаг 4 ... 3 яйца

, чтобы различать каждый ингредиент с помощью нумерации шагов. Я пытаюсь создать алгоритм, который сделает это автоматически. В настоящее время я пытался отобразить каждый ингредиент, но все время получаю сообщение об ошибке. Я новичок в React Native и имею базовые c знания о Javascript, это, вероятно, легко, но я просто не могу понять, как это сделать.

Это мой код 

ingredients = [
    "1 ½ cups shredded Swiss cheese",
    '4 teaspoons all-purpose flour',
    '½ cup cooked ham, diced',
    '3 eggs',
    '1 cup milk'
]

const Ingridients = () => (
<View style={[styles.scene, { backgroundColor: 'white', height:'30%' }]}>
    {ingredients.map(ingri => <Text style={styles.ingredients} key={ingri}>{ingri.length}{ingri}</Text>)}
</View>);

Я был бы очень признателен от всего сердца, если бы кто-нибудь помог мне добавить нумерацию в этот список. Заранее спасибо !!!!!

Ответы [ 3 ]

4 голосов
/ 10 июля 2020

Вы можете получить индекс текущей итерации с помощью второго параметра, который предоставляет функция Array.map 

{ingredients.map((ingredient, index) => (
    <Text style={styles.ingredients} key={index}>
        {index + 1}: {ingredient}
    </Text>
))}
0 голосов
/ 10 июля 2020

Функция Array map предоставляет current iteration index в качестве второго аргумента. 

const Ingridients = () => (
<View style={[styles.scene, { backgroundColor: 'white', height:'30%' }]}>
    {ingredients.map((ingri, index) => <Text style={styles.ingredients} key={ingri}>Step {index + 1}. {ingri}</Text>)}
</View>);
0 голосов
/ 10 июля 2020

Вы можете использовать индекс каждого элемента. Поскольку javascript массивы индексируются 0, вы можете сделать что-то вроде этого: 

const Ingridients = () => (
<View style={[styles.scene, { backgroundColor: 'white', height:'30%' }]}>
    {ingredients.map( (ingri, index) =>  // <- introducing the index argument
<Text style={styles.ingredients} key={ingri}>
{'Step ' + (index+1) } // <- use the index + 1 since it starts with 0
{ingri.length}{ingri}
</Text>)}
</View>);
...