如何在 React-Navigation-3 中设置应用容器？答案

【问题标题】：How to set up app container in React-Navigation-3?如何在 React-Navigation-3 中设置应用容器？
【发布时间】：2019-02-15 13:24:15
【问题描述】：

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

这是解决方案 (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 开始，您必须直接设置应用容器。

谁能告诉我如何使用createAppContainer() 实现这一目标？

【问题讨论】：

查看演示示例：stackoverflow.com/a/54229716/1042817
谢谢，但它现在可以工作了。

标签： reactjs react-native react-navigation hybrid-mobile-app

【解决方案1】：

作为一个示例，来自我自己的一个项目：

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

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

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

【讨论】：

【解决方案2】：

感谢@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',
    }
);

【讨论】：