React Native - передача параметра родному элементу пользовательского компонента навигатора - PullRequest
Новая
       12

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

0 голосов
/ 18 октября 2019

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

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. (аналогично передаче параметра родительскому / братскому компоненту через реквизит). Возможно ли это?

1 Ответ

0 голосов
/ 18 октября 2019

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

, чтобыкод ниже будет 

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

, затем в home предположим, что вы хотите вызвать homestack по кнопке clikc, 

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 >
        );
    }


}

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

...