REACT NATIVE Как я могу выделить элемент с помощью прокрутки и увеличить/уменьшить выделенный элемент?
Я создаю «Отслеживание инициатив» для домашнего использования. Моя цель состоит в том, чтобы по умолчанию выделить первый элемент в верхней части списка и использовать счетчик, который отслеживает ходы, чтобы выделить элемент, соответствующий его ходу. Например. При нажатии кнопки «+» следующий элемент должен быть выделен, а предыдущий элемент должен вернуться в нормальное состояние. В настоящее время я использую функцию карты для отображения массива. Я чувствую, что должен быть способ использовать индекс и стиль для достижения того, чего я хочу, но пока мне не повезло.
Заранее спасибо за любую помощь или предложения!
связанный код ниже:
let Encounter1Array = [
{ name: "goblin1", init: 5 },
{ name: "goblin2", init: 8 },
{ name: "goblin3", init: 15 },
{ name: "goblin4", init: 3 },
{ name: "goblin5", init: 9 },
];
function InitiativeTrackerScreen() {
const [encounter, setEncounter] = useState(Encounter1Array);
encounter.sort(function (x, y) {
return y.init - x.init;
});
return (
<KeyboardAvoidingView style = {styles.wrapper}>
<ScrollView>
{encounter.map((item, index) => {
return (
<View key = {index}>
<TouchableOpacity style = {styles.ItemDisplayContainer}>
<View>
<View>
<Text style = {{ fontStyle: "italic", fontSize: 16 }}>
{item.name}
</Text>
</View>
<View>
<Text style = {{ fontSize: 12 }}>
Initiative: {item.init}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</KeyboardAvoidingView>
);
}
Ответы 1
Вам нужно дополнительное состояние, чтобы отслеживать индекс элемента, который вы хотите выделить. Затем вы можете использовать условный оператор для соответствия правому индексу и переключить его стиль.
const P = ({ list }) => {
const [current, setCurrent] = useState(0);
return list.map((item, i) =>
<View style = {i === current ? highlightStyle : style}>
<Button onPress = {() => setCurrent(current + 1)}>
{"+"}
</Button>
{item}
</View>
);
};
Спасибо. Этого было достаточно, чтобы уйти. У меня еще нет представителя, чтобы проголосовать, иначе я бы!
Если я добавлю «const [increment, setIncrement] = useState (1);» или что-то в этом роде, я думаю, что я должен иметь возможность настроить эту переменную с помощью кнопки увеличения/уменьшения, но я не уверен, как использовать этот хук для изменения стиля элемента в массиве, который соответствует приращению поворота .