如何在React-Navigation-3中设置应用容器?

问题描述 投票:1回答:2

我想将数据作为initialProps从Native android发送到React-Native,但问题在于react-navigation我在其中使用StackNavigator

这是解决方案(got help from here),它可以在以前版本的react-navigation中使用,用于将initialProps从本机发送到react-native的第一个场景:

export default class AwesomeProject extends Component {
    constructor(props){
        super(props)
        console.warn(this.props.movie_id);
    }

    render() {
              return <RootStack screenProps={this.props.movie_id} />;
        }
}

const RootStack = createStackNavigator(
    { 
        home:  {screen: Details},
        genre: {screen: Genre},
    },
    { 
        initialRouteName: 'home',
    }
);

但是从react-navigation-3开始,你必须直接设置app容器。

任何人都可以告诉我如何使用createAppContainer()实现这一目标?

reactjs react-native react-navigation hybrid-mobile-app
2个回答
2
投票

作为样本,来自我自己的一个项目:

import {
  createSwitchNavigator,
  createAppContainer
} from 'react-navigation';

const SwitchNavigator = createSwitchNavigator(
  {
    ScreenOne,
    ScreenTwo,
    ScreenThree
  }
);
const AppContainer = createAppContainer(SwitchNavigator);

class App extends Component {
  render() {
    return (<AppContainer />);
  }
}

0
投票

感谢@David Gevorgyan我成功地将initialProps从原生android发送到react-native的第一个StackNavigator场景,如下所示:

export default class AwesomeProject extends Component {
    constructor(props){
        super(props)
    }

    render() {
    return <RootStack screenProps={this.props.movie_id} />;
  }
}

const RootStack = createAppContainer(StackNavigator)

const StackNavigator = createStackNavigator(
    { 
        home:  {screen: Details},
        genre: {screen: Genre},
    },
    { 
        initialRouteName: 'home',
    }
);
© www.soinside.com 2019 - 2024. All rights reserved.