在 'cardview 中使用 'navigation'

Question

我有一个带有卡片视图的屏幕。

每个卡片视图有：

1 张图片
1 个标题
1x 描述
1 倍可触摸不透明度

我希望找到一种方法，让每个可触摸的不透明度都有不同的导航。项目 0 将导航到屏幕 x，项目 1 将导航到屏幕 y。

我怀疑是否可以为每个可触摸的不透明度设置不同的功能？

function ServiceCoverageButtong() {
  const navigation = useNavigation();
  return (
    <View>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.navigate('GeneralInformationSupportScreen')}>
        <Text style={styles.buttonText}>Teste</Text>
      </TouchableOpacity>
    </View>
  );
}

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong />
    </View>
  );
};

如何创建多个函数并使用 CardItemNewsProvider 的 item？

我是 React Native 的新手，我正在努力做到这一点。

谢谢:)

Answer 1

是的，这是可能的。您可以将道具传递给 <ServiceCoverageButtong state={"0"}/>

然后在您的 ServiceCoverageButtong() 中从您的道具获取状态并运行检查应返回的内容。

    function ServiceCoverageButtong({state}) {
      const navigation = useNavigation();

if (state == "0") {
      return (
        <View>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('GeneralInformationSupportScreen')}>
            <Text style={styles.buttonText}>Teste</Text>
          </TouchableOpacity>
        </View>
      );
    }
} else {
return (
        <View>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('anotherScreen')}>
            <Text style={styles.buttonText}>Teste</Text>
          </TouchableOpacity>
        </View>
      );
    }
}

Answer 2

谢谢 caslawter！

任何感兴趣的人。

function ServiceCoverageButtong({state}) {
  const navigation = useNavigation();

  if (state === '0') {
    console.log('state', state);
    return (
      <View>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            navigation.navigate('GeneralInformationSupportScreen')
          }>
          <Text style={styles.buttonText}>Hi I'm a test</Text>
        </TouchableOpacity>
      </View>
    );
  } else {
    console.log('state', state);
    return (
      <View>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate('anotherScreen')}>
          <Text style={styles.buttonText}>You're really into testing</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong state={item.stateButton} />
    </View>
  );
};

还有另一个片段：

  let DataNewsProvider = [
    {
      title: NewsHomeCountryTitle,
      body: NewsHomeCountryBody,
      imgUrl: Images.newsYourCountryImage,
      textButton: NewsTextButton,
      stateButton: '0',
    },
    {
      title: NewsWorldwideTitle,
      body: NewsWorldwideBody,
      imgUrl: Images.newsWorldwideImage,
      textButton: NewsTextButton,
      stateButton: '1',
    },
  ];

Answer 3

如果您为按钮使用一个组件，则只需将 onPress 道具添加到您的 DataNewsProvider

let DataNewsProvider = [
    {
      title: NewsHomeCountryTitle,
      body: NewsHomeCountryBody,
      imgUrl: Images.newsYourCountryImage,
      textButton: NewsTextButton,
      onPress: () => navigation.navigate('GeneralInformationSupportScreen'),
    },
    {
      title: NewsWorldwideTitle,
      body: NewsWorldwideBody,
      imgUrl: Images.newsWorldwideImage,
      textButton: NewsTextButton,
      onPress: () => navigation.navigate('anotherScreen'),
    },
  ];

并将其传递给您的按钮组件 TouchableOpacity

const CardItemNewsProvider = ({item, index}) => {
  return (
    <View style={styles.container} key={index}>
      <Image source={item.imgUrl} style={styles.image} />
      <Text style={styles.header}>{item.title}</Text>
      <Text style={styles.body}>{item.body}</Text>
      <ServiceCoverageButtong state={item.stateButton} onPress={item.onPress}/>
    </View>
  );
};

这样你就不需要额外的条件了，你只需按原样传递这些函数。

在 'cardview 中使用 'navigation'

Using 'navigation' in 'cardview

javascript

reactjs

react-native

react-navigation