React-native：我如何将参数传递给 Stacknavigator 组件

【问题标题】：React-native: How do i pass parameters to Stacknavigator componentReact-native：我如何将参数传递给 Stacknavigator 组件
【发布时间】：2017-05-29 20:19:29
【问题描述】：

我正在使用堆栈导航器。我想知道如何将参数传递给它。

我渲染 Pick Component 的 index.js 文件

render() {
    return (
        ...
           <Pick>
        ...
    );
}

pick.js 组件是一个堆栈导航器

class PickCategory extends React.Component 
{
    ....
}

module.exports = StackNavigator({
    Parent: { screen: PickCategory },
})

如何将 index.js 中的参数传递给 pick.js 以在 PickCategory 中使用它？

【问题讨论】：

标签： javascript react-native parameters navigation

【解决方案1】：

一种选择是通过堆栈导航器使用screenProps。您需要像这样进行一些重组：

const PickerNavigator = StackNavigator({
  Parent: { screen: PickCategory }
});

class Picker extends React.Component {
  render() {
    return <PickerNavigator screenProps={...your props...} />;
  }
}

然后您的道具将可以通过this.props.screenProps 在PickerCategory 中访问。

【讨论】：

没用。我在 <PickCategory screenProps={{abc:'abc'}} /> 之前尝试过，在 PickCategory 构造函数内部：alert(this.props.screenProps) ~> Cannot read property screenProps` of undefined`
构造函数内部props将来自函数参数。所以：constructor(props) { super(props); console.log(props.screenProps); }