android - 使用 `Screen`(ES6)时如何在 `TabNavigator`中设置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);
    }
}