在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'，这不是有效的屏幕名称：

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