StackNavigator(父)的导航组件(子)引用的子组件如何获取导航组件的navigation



  • 多页面导航跳转:
    import HomeScreen from "../../js/Home/Any_Home" ……
    导航组件是引入的;
    顶部导航如下
    const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
    Cloud: { screen: CloudScreen },
    Find: { screen: FindScreen },
    Message: { screen: MsgScreen },
    Self: { screen: SelfScreen },
    Show: { screen: ShowScreen },
    });
    在对应的Home页面导航组件HomeScreen内部import其他组件内容,其他组件内容需要调用HomeScreen继承的navigation,也就是用navigate方法进行页面跳转
    Any_Home.js内部:、
    引用组件bottom:
    import Bottomkind from'../../js/AgainBody/bottom'、

    export default class HomeScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
    header:null
    });
    render() {
    const {navigate} = this.props.navigation;//导航组件自己可以使用navigation但是无法传入子组件
    return (
    <View style={{flex:1}}>
    <View style={{flex:1}}>
    <Text>首页·header</Text>
    </View>
    <View style={{flex:1}}>
    <Text>Hello, Chat App!首页</Text>
    </View>
    <Bottomkind screenProps={{navigate}}/>//这里是否可以传入?求问
    </View>
    );
    }
    }
    bottom.js内部
    export default class bottomkind extends React.Component {

    …………
    render() {
    return(
    <View>
    <Button onPress={()=>{this.props.navigation.navigate('Chat')}}/>//英文文档有提过navigation会由导航器传递给所有的导航组件但是希望导航组件的子组件也能够获取navigation
    </View>
    )
    }
    }
    在孙级组件内希望使用navigate方法进行导航跳转但是导航组件的navigation不知道如何传入bottom


登录后回复