在“卡片視圖”中使用“導航”

我有一個帶有卡片視圖的螢屏。

每個卡片視圖都有：

• 1x 圖片
• 1x 標題
• 1x 描述
• 1x 可觸摸不透明度

我希望找到一種方法，讓每個可觸摸的不透明度都有不同的導航。專案 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>
  );
};

如何創建多個函式并使用itemof CardItemNewsProvider？

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

謝謝 ：）

uj5u.com熱心網友回復：

是的，這是可能的。您可以將道具傳遞給您的<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>
      );
    }
}

uj5u.com熱心網友回復：

謝謝卡斯勞特！

對于任何有興趣的人。

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',
    },
  ];

uj5u.com熱心網友回復：

如果您為按鈕使用一個組件，則只需添加onPressprop 添加到您的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>
  );
};

這樣你就不需要額外的條件，你只需按原樣傳遞這些函式。

標籤：javascript 反应 反应式 反应导航

上一篇：某意大利小哥，竟靠一個快取中間件直接封神？

下一篇：將當前時間與if陳述句中的特定時間進行比較