Блог

Главная - Вопросы по программированию - Как заставить функцию TouchableOpacity работать правильно?

Как заставить функцию TouchableOpacity работать правильно?

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