reactjs - 在反应导航 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>

  )

}

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

标签： reactjsreact-nativereact-navigationreact-props

Answer 1

您实际上希望将存储在props.destination('Home'在这种情况下) 的字符串传递给不是有效屏幕名称navigate()的字符串文字：'props.destination'

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