如何将初始道具(或launchoptions)传递到第一个场景?

时间:2019-02-13 07:21:35

标签: android reactjs react-native hybrid-mobile-app

我正在通过launchoptions在Android中设置一个简单的道具,从而将数据从Android Native发送到React native。

我能够在react-native模块中成功接收到初始道具,但是现在当我像这样使用StackNavigator时:

const RootStack = createStackNavigator(
    { 
        home: Details,
        genre: Genre,
    },
    { 
        initialRouteName: 'home',
    }
);
const AwesomeProject = createAppContainer(RootStack);
export default AwesomeProject;

现在,我无法在HomeScreen的构造函数中使用我的Prop。如何将我的初始道具传递到home屏幕?

我正在使用的本机版本为 0.58.4

以下是完整的 React-Native代码

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

import Genre from './app/Genre';
import Details from './app/Details';

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

const AwesomeProject = createAppContainer(RootStack);
export default AwesomeProject;

这是 Android代码

@Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                Bundle bundle = new Bundle();
                String str = MainActivity.getMovieID();
                bundle.putString("movie_id", str);
                return bundle;
            }
        };
    }

我的问题与此完全相同: https://github.com/react-navigation/react-navigation/issues/634

但是问题是用户给出的解决方案是针对旧版本的react,在新的react-navigation-3中,您必须直接设置应用容器,因此他的解决方案不起作用。

请帮助。

2 个答案:

答案 0 :(得分:3)

最终使它工作,并成功地将initialProps从本机android发送到react-native的第一个StackNavigator场景,如下所示:

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

const RootStack = createAppContainer(StackNavigator)

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

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

答案 1 :(得分:0)

根据文档,您可以为自己的路线定义params