在反应导航 v5 中传递道具的问题

Question

我想创建一个自定义 header 并且我打算制作一个箭头图标，但是这个箭头图标不会将用户带回上一页，我想控制它以确定哪个它应该带回来的屏幕我有三个屏幕 Home、screen 1 和 screen 2

我为屏幕 2 创建了一个带有箭头图标的自定义 header，我希望它能在用户点击后返回到主屏幕。

这是header代码：

const Header =(props)=>{

 const {navigation}=props;

return(

<View>

<Icon onPress={()=>navigation.navigate('props.destination')} />

</View>

这是屏幕 2 的代码：


import {Header} from './';


const Screen2 = (props) => {

  const {navigation}=props;

  return (
  <Fragment>
    <Header  destination='Home' navigation={navigation}  />
      <View style={styles.container}>

        <Text>Screen2</Text>
      </View>
      </Fragment>

  )

}

这是我遇到的错误，我该如何解决？

Answer 1

您实际上想将存储在 props.destination 中的字符串（在本例中为 'Home'）传递给 navigate()，而不是将字符串文字 'props.destination' 传递给 'props.destination'，后者是无效的网名：

<Icon onPress={()=>navigation.navigate(props.destination)} />

在反应导航 v5 中传递道具的问题

Issue with passing props in react navigation v5

reactjs

react-native

react-navigation

react-props