React Native - передача параметра брату пользовательского компонента навигатора

У меня есть собственный навигатор, как показано ниже

const HomeStackNavigator = createStackNavigator({
    Home: HomeScreen,
    List: ListScreen,
    Details: DetailsScreen
},
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            header: null,
        }
    });

export default class CustomHomeStack extends React.Component {
    static router = HomeStackNavigator.router;
    render() {
        const { navigation } = this.props;

        return (
            <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
                <CustomHomeHeader /* breadCrumbParam={??} */ />
                <HomeStackNavigator navigation={navigation} />
            </SafeAreaView >
        );
    }
}

При переходе к списку или деталям я могу передать параметр на следующий экран this.props.navigation.navigate('List', { breadCrumbParam: {id: theId, displayName: theName }} })

Мне также нужно передать те же параметры CustomHomeHeader. (аналогично передаче параметра родительскому / одноуровневому компоненту через props). Это возможно?


react-native react-navigation react-navigation-stack
person FLash    schedule 18.10.2019    source источник
comment
немного непонятно. как именно то, что вы хотите сделать, передавать данные в качестве реквизита в customehomeheader или что-то еще?   -  person Gaurav Roy    schedule 18.10.2019
comment
да. Передавать данные в качестве свойств CustomHomeHeader из HomeScreen, ListScreen и DetailsScreen   -  person FLash    schedule 18.10.2019
comment
так же, как вы это делали в предыдущем <CustomHomeHeader /* breadCrumbParam={??} */ /> . , есть ли там какие-то проблемы.   -  person Gaurav Roy    schedule 18.10.2019
comment
Нет. Мне нужно передать breadCrumbParam в CustomHeader, но я не знаю, как получить его из HomeScreen в CustomHomeStack.   -  person FLash    schedule 18.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, поэтому вам нужно сделать несколько изменений, 1. добавить CustomHomeStack в стек навигации 2. передать данные из дома в домашний стек 3. получить данные из дома в домашний стек и передать их в качестве реквизита в CustomHomeHeader

поэтому приведенный ниже код будет

const HomeStackNavigator = createStackNavigator({
    Home: HomeScreen,
    List: ListScreen,
    Details: DetailsScreen,
    CustomHomeStack:CustomHomeStack
},
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            header: null,
        }
    });

затем дома предположим, что вы хотите вызвать домашний стек нажатием кнопки,

class Home extends Component{


onButtonClick(){
this.props.navigation.push('CustomHomeStack', { breadCrumbParam: 100 })

}


}

затем в customhomestack вам нужно использовать параметры навигации и передать их customgheader, сохранив в состоянии:

class CustomHomeStack extends Component {

 constructor(props){
        super(props);
this.state={
breadCrumbId:''
}
    }

componentDidMount(){
let breadCrumb = this.props.navigation.getParam("breadCrumbParam", "NO-ID");
this.setState({breadCrumbId:breadCrumb})
}

 render() {
        const { navigation } = this.props;

        return (
            <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
                <CustomHomeHeader  breadCrumbParam={this.state.breadCrumbId}  />
                <HomeStackNavigator navigation={navigation} />
            </SafeAreaView >
        );
    }


}

Надеюсь, это поможет. в противном случае опубликуйте проблему

person Gaurav Roy    schedule 18.10.2019