Проблема с прохождением реквизита в реагирующей навигации 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)} />