使用`TabNavigator`(ES6)时如何在`Screen`中设置Params？

Question

(Android React-Native 0.47)

我怎么能把两个 PopularTab diff params 并在 PopularTab 中得到这个 params，我试了很多次，但都失败了。我能得到的唯一 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。设置默认导航参数的解决方法

虽然有效，但还是有一些问题。首先，如您所见，您收到了关于 Render 方法应该是 props 和 state 的纯函数的警告； constructor side-effects 是一个反模式，这是因为每次你调用 setParams 时，navigationOptions 都会被再次触发，所以 react-native 警告你这可能是一个反模式，或者可能导致无限循环。

虽然我们知道这不会是无限循环，但警告不会消失，因为 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);
    }
}

使用`TabNavigator`(ES6)时如何在`Screen`中设置Params？

How to setParams in `Screen` when use `TabNavigator`(ES6)?

android

tabnavigator

react-native

react-navigation

1。建议通过 screenProps

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

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