当使用`TabNavigator`（ES6）时，如何在`Screen`中设置PARarams？

Question

（Android React-Native 0.47）

我怎么能在PopularTab中提供两个params差异params并获得此PopularTab，我已多次尝试，但失败了。 我可以获得的唯一params是navigation.key和navigation.routeName：

const Popular = TabNavigator({
  IOS: {
     screen: PopularTab,
     //I try to code here to set the params but fail.
     //eg:  data: 'param1'
      },
  Android: {
    screen: PopularTab,
      },
   },
{
   tabBarPosition: 'bottom',
   tabBarOptions: {
   activeTintColor: '#e91e63',
    }
  }
 );

Answer 1

有三种方法可以实现这一目标，看看哪种方式适合您。

1。建议通过screenProps

以官方方式进行

screenProps似乎也适合您的需求，采用单向设计模式。

辅助功能

function ScreenWithDefaultParams(Comp, defaultParams) {
    return class extends Component {
        render() {
            return (<Comp {...this.props} screenProps={defaultParams} />)
        }
    }
}

TabNavigation定义

IOS: {
    screen: ScreenWithDefaultParams(PopularTab, {test: 'default'})
},

然后你可以在PopularTab内找到它：

class PopularTab extends Component {
    render() {
        /* get default screenProps */
        console.log('default screenProps here!', this.props.screenProps);
    }
}

2。设置默认导航参数的解决方法

虽然它有效，但它有一些问题。首先，正如你所看到的那样，你警告渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，这是因为每次调用setParams时，navigationOptions都会再次触发，因此react-native警告您可能是反模式，或者可能导致无限循环。 / p>

虽然我们知道它不会是一个无限循环，但警告不会消失，因为react-native编译器从不满足它。

辅助功能

function setDefaultParams(nav, defaultParams) {
    const { state, setParams } = nav.navigation;
    const params = state.params || {};

    let token = btoa(JSON.stringify(defaultParams));
    if (params[token]) return;

    setParams({ [token]: true, ...defaultParams });
}

TabNavigation定义

IOS: {
    screen: PopularTab,
    navigationOptions: (nav) => {
        setDefaultParams(nav, {test: 'default'});
    }
},

然后你可以在PopularTab内找到它：

class PopularTab extends Component {
    render() {
        const { state, setParams, navigate } = this.props.navigation;
        const params = state.params || {};

        /* get default set params */
        console.log('default param here!', params.test);
    }
}

3。在导航器中设置组件道具

如果您想使用正常Component props：

进行此操作

TabNavigation定义

IOS: {
    screen: (props) => <PopularTab {...props} test='default' />,
},

然后你可以在PopularTab内找到它：

class PopularTab extends Component {
    render() {
        /* get default props */
        console.log('default props here!', this.props.test);
    }
}