1

(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',
    }
  }
 );
4

1 回答 1

2

有三种方法可以实现这一点，看看哪一种适合您的需要。

1. 建议采用官方方式，通过 screenProps

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

辅助函数

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

选项卡导航定义

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 的纯函数的警告；构造函数的副作用是一种反模式，这是因为每次调用 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 });
}

选项卡导航定义

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.在导航器中设置组件props

如果你想让它正常发生Component props：

选项卡导航定义

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

然后你可以把它放进去PopularTab：

class PopularTab extends Component {
    render() {
        /* get default props */
        console.log('default props here!', this.props.test);
    }
}
于 2017-08-22T09:50:32.800 回答