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

const HomeStackNavigator=createStackNavigator({
主页：主屏幕，
列表：列表屏幕，
详细信息：详细信息屏幕
},
{
initialRouteName:“主页”，
默认导航选项：{
标题：null，
}
});
导出默认类CustomHomeStack扩展React.Component{
静态路由器=HomeStackNavigator.router；
render（）{
const{navigation}=this.props；
返回(
);
}
}

导航到列表或详细信息时，我可以将参数传递到下一个屏幕

this.props.navigation.navigate（'List'，{breadCrumbParam:{id:theId，displayName:theName}}}}）

---

我还需要将相同的参数传递给

CustomHomeHeader

。（类似于通过道具将参数传递给父/同级组件）。这可能吗？

好的，所以您需要做一些更改， 1.在导航堆栈中添加CustomHomeStack 2.将数据从主页传递到homestack 3.在homestack中从主页接收数据，并作为道具传递给CustomHomeHeader

因此，下面的代码将是

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

然后在家里，假设你想调用button clikc上的homestack

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


}

类CustomHomeStack扩展组件{
建造师（道具）{
超级（道具）；
这个州={
面包屑标：“”
}
}
componentDidMount（）{
让breadCrumb=this.props.navigation.getParam（“breadCrumbParam”，“NO-ID”）；
this.setState（{breadCrumbId:breadCrumb}）
}
render（）{
const{navigation}=this.props；
返回(
);
}
}

---

希望能有帮助。否则，发布问题

有点不清楚。就像您想要做的一样，将数据作为道具传递给customehomeheader或其他东西？是的。将数据作为道具从主屏幕、列表屏幕和详细信息屏幕传递到

CustomHomeHeader

，就像您在上面的

中所做的那样，有什么问题吗？没有。我需要将面包屑参数传递给CustomHeader，但不知道如何将其从主屏幕传递到CustomHomeStack