如何使touchableOpacity函数正常工作?

时间:2020-08-30 14:06:22

标签: javascript reactjs react-native

当我按下“免疫增强”时,会显示正确的Pressedinfo,因此它的原始功能可以正常工作,但是问题是它还会提醒柑橘,当我单击应该提醒柑橘但没有任何提示的touchableOpacity时提醒我,请检查下面的代码.................................. ....

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 个答案:

答案 0 :(得分:1)

将onPress = {citrusAlert()}更改为onPress = {citrusAlert}

相关问题