#javascript #reactjs #react-native
#javascript #reactjs #react-native
Вопрос:
Когда я нажимаю на «Повышение иммунитета», отображается правильная Pressedinfo, поэтому ее первоначальная функция работает, но проблема в том, что она также предупреждает citrus, и когда я нажимаю на TouchableOpacity, которая должна предупреждать Citrus, но я не получаю никаких предупреждений, когда я должен, пожалуйста, проверьте код ниже…………………………………..
export default function LinksScreen() {
const citrusAlert = () => Alert.alert("Citrus ");
const [Pressedinfo, setPressedInfo] = useState(null)
const pressHandler = (id) => {
if (id == 1) {
setPressedInfo(
<View>
<View style={Styles.component}>
<Image source={home} style={Styles.home} />
<Text style={Styles.Text2}>#Stay home, Save lives</Text>
</View>
<View style={Styles.component}>
<Image source={distanceimg} style={Styles.distance} />
<Text style={Styles.Text2}>Keep a safe distance</Text>
</View>
<View style={Styles.component}>
<Image source={washinghands} style={Styles.distance} />
<Text style={Styles.Text2}>Wash hands often</Text>
</View>
<View style={Styles.component}>
<Image source={coverimg} style={Styles.distance} />
<Text style={Styles.Text2}>Cover your cough</Text>
</View>
<View style={Styles.component}>
<Image source={sickimg} style={Styles.distance} />
<Text style={Styles.Text2}>Sick? Call for help</Text>
</View>
</View>
)
} else if (id == 2) {
setPressedInfo(<View>
<TouchableOpacity onPress={citrusAlert()} style={Styles.component}>
<Image source={citrus} style={Styles.distance} />
<Text style={Styles.Text2}>Citrus (Vitamin C)</Text>
</TouchableOpacity>
<View style={Styles.component}>
<Image source={bellp} style={Styles.distance} />
<Text style={Styles.Text2}>Red Bell Peppers</Text>
</View>
<View style={Styles.component}>
<Image source={broc} style={Styles.distance} />
<Text style={Styles.Text2}>Broccoli</Text>
</View>
<View style={Styles.component}>
<Image source={garlic} style={Styles.distance} />
<Text style={Styles.Text2}>Garlic</Text>
</View>
<View style={Styles.component}>
<Image source={ginger} style={Styles.distance} />
<Text style={Styles.Text2}>Ginger</Text>
</View>
<View style={Styles.component}>
<Image source={spinach} style={Styles.distance} />
<Text style={Styles.Text2}>Spinach</Text>
</View>
</View>)
} else if (id == 3) {
setPressedInfo(<View>
<View style={Styles.component}>
<Text style={Styles.Text3}>Stay Home and Call a Health Care Provider</Text>
</View>
</View>)
}
}
return (
<ScrollView style={Styles.scrv} >
<View style={Styles.container} >
<TouchableOpacity onPress={() => pressHandler(1)}>
<View style={Styles.container2}>
<Image source={img5} style={Styles.Hand} />
<Text style={Styles.Text1}> 5 rules of prevention</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(2)}>
<View style={Styles.container2}>
<Image source={food} style={Styles.Hand} />
<Text style={Styles.Text1}>Immunity boosting</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(3)}>
<View style={Styles.container2}>
<Image source={sickimg} style={Styles.Hand} />
<Text style={Styles.Text1}>Feeling Sick?</Text>
</View>
</TouchableOpacity>
</View>
{Pressedinfo}
</ScrollView>
)
} Комментарии:
1. Старайтесь избегать добавления компонентов в свой хук useState. Вместо этого обновите свое состояние числами, логическими значениями или строками и используйте эти значения для условного отображения компонентов, в идеале внутри их собственных файлов. Таким образом проще настраивать и отлаживать компоненты и происходящие изменения.
Ответ №1:
измените onPress={citrusAlert()} на onPress={citrusAlert}