React Navigation v5中传递道具的问题

Question

我想创建一个自定义标题，我要制作一个箭头图标，但是此箭头图标不会将用户带回上一页，我想对其进行控制以确定应将其带回哪个屏幕我有三个屏幕Home，screen 1和screen 2

我已经为屏幕2创建了一个带有箭头图标的自定义标题，我希望它在被点击后将用户带回主屏幕。

这是标头代码：

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'：