从导航props设置初始状态

IT技术 reactjs react-native react-native-android react-navigation react-native-navigation
2021-04-29 14:42:58

我正在使用React Navigation在屏幕之间进行路由。我有一个初始屏幕,其中包含FlatList我在传递这样的参数时路由到新屏幕的项目, onclick 。

props.navigation.navigate('Details', {
    id: props.id,
    title: props.title
});

Details屏幕中,我可以使用以下代码接收它,但是考虑到它是一个静态函数并且我无法访问this.setState().

static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;

    console.log(params);
};
3个回答

这将允许您在构造函数中处理它,这是以前放置在 componentWillMount 中的任何东西都可以去的其他位置。

constructor(props) {
    super(props)
    this.state = {
        params: props.navigation.state.params
    }
}

作为参考,通过将 props 作为参数传递给构造函数,然后在它们上运行 super 函数,您可以获得在调用任何其他生命周期函数之前设置初始状态或运行其他一次性函数的能力。

使用 componentWillMount,而不是 navigationOptions

componentWillMount(){
   this.setState({
       params:this.props.navigation.state.params
       })
 }

对于任何正在寻找的人来说,这是我迄今为止设法让它工作的方法。

export default class Detail extends React.PureComponent {

state = {
    id: this.props.navigation.getParam('id', -1),
    title: this.props.navigation.getParam('title', null)
};

render() {

        return (

            . . .

        );
    }

}

这允许您使用初始状态初始化组件,这可能不是最好的方法,并且代码肯定可以进行一些解构,但我不确定如何去做,所以现在这可行。如果有人可以提出更有效和性能更高的方法,我会很高兴。

"dependencies": {
"react": "^16.3.1",
"react-native": "0.55.4",
"react-navigation": "^2.0.1"
}