react-navigation

1. screen组件（也可以理解成路由组件）的props上有一个navigation对象。

1.1 navigate()函数：跳转。

navigation.navigate({routeName, params, action, key})
 //OR
navigation.navigate(routeName, params, action)

1.2 state ——The screen's current state/route

navigate()函数和state使用

class HomeScreen extends React.Component {
  render() {

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details',{name:"Jack"})}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
 
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen {this.props.navigation.state.params.name}</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

1.3 getParam

当params不存在时，this.props.navigation.state.params.name就会报错，因为this.props.navigation.state.params的值是undefined。

可以使用getParam()

const name = this.props.navigation.getParam('name', 'Peter');

如果 name 或 param 未定义, 则返回 Peter。

1.4 setParams:修改当前页面接收到的params的值。

扫描二维码关注公众号，回复： 3700895 查看本文章

比如执行函数

navigation.navigate('Details',{name:"Jack"})

此时跳转到DetailsScreen页面，页面显示Details Screen Jack,点击页面中的按钮，内容变成Details Screen Lucy

class DetailsScreen extends React.Component {
 
  render() {
    const name = this.props.navigation.getParam('name', 'Peter');
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen {name}</Text>
        <Button
        onPress={() => this.props.navigation.setParams({ name: 'Lucy' })}
        title="Set title name to 'Lucy'"
      />
      </View>
    );
  }
}

2. screen组件的props上有一个screenProps对象,，默认值是undefined。

const RootStack = createStackNavigator(
  {
    Home: {
      screen:HomeScreen,
      navigationOptions: () => ({
        title: `Home`,
      })},
    Details: {
      screen:DetailsScreen,
      navigationOptions: () => ({
        title: `Details`,
      }),
    },
    Page1:Page1Screenn,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack screenProps={{global:'global'}} />;
  }
}

猜你喜欢