Question

当我单击该可触摸的不透明度时，我想移动到另一个组件，请从API获取“链接”，然后将其传输到该另一个组件。您能给我一些技巧吗？

 componentDidMount(){
  fetch("https://trefle.io//api/plants?token=/////////////////&fbclid=IwAR3FY03yEVzS77Ca1Q9TIbMdMlJhXtpOjhcqcD-MJHAYJXCNcdA3UrJ2p9Q")
  .then(response => response.json())
 .then((responseJson)=> {
   this.setState({
    loading: false,
    plants: responseJson
   })
 })
 .catch(error=>console.log(error)) //to catch the errors if any
 }


 renderItem=(data)=>

 <TouchableOpacity style={styles.card} onPress={() => this.props.navigation.navigate('CatalogPlant', {data.item.link: link})} >
        <Image style={styles.cardImage} source={require('./images/flower.jpg')}/>
        <Text style={styles.cardText} >{data.item.scientific_name}</Text> 
 </TouchableOpacity>

Answer 1

在CatalogPlant组件中为您的提取定义一个函数。并从navigation.getParam()获取链接。例如：

myFetchFunction = () => {
    let {navigation} = this.props
    let data = navigation.getParam('data', false)
    if(data){
        let link = data.item.link
        // ...
    }
}

如果在CatalogPlant中未定义导航，则可以使用withNavigation。

Answer 2

renderItem = (data)=>{
 const {navigation} = this.props;
return (
        <TouchableOpacity 
         style={styles.card} 
         onPress={() => {
           navigation.navigate('CatalogPlant', data.item.link)
         }
        >
          <Image 
           style={styles.cardImage} 
           source={require('./images/flower.jpg')}
          />
          <Text 
           style={styles.cardText} 
          >
           {data.item.scientific_name}
          </Text> 
        </TouchableOpacity>
)

}

如何将“链接”转移到另一个组件？

2 个答案: