#react-navigation# 学习重点记录

push 和 navigate的区别

1. push: 每次调用 push 时, 咱们会向导航堆栈中添加新路由。
2. navigate: 当你调用 navigate 时, 它首先尝试查找具备该名称的现有路由, 而且只有在堆栈上没有一个新路由时才会推送该路由。

返回

若是当前页面能够执行返回操做，则 stack navigator 会自动提供一个包含返回按钮的标题栏（若是导航堆栈中只有一个页面，则没有任何可返回的内容，所以也不存在返回键）。

有时候你但愿可以以编程的方式触发此行为，可使用 this.props.navigation.goBack() 。

在Android上，React Navigation 挂钩到硬件的返回按钮，并在用户按下返回按钮时触发 goBack()方法，所以它的行为与用户指望的相同。

另外一个常见需求是可以跨越多个页面返回

• 例如，若是你处在堆栈深处，上面有多个页面，此时你想要将上面全部的页面都销毁，并返回第一个页面。 在这种状况下，咱们知道咱们要回到 Home ，因此咱们可使用 navigate('Home') ，或者使用 navigation.popToTop() ，它能够返回到堆栈中的第一个页面。

传递参数给路由

有2个知识点
1.须要将参数包装成一个对象，做为navigation.navigate方法的第二个参数传递给路由。如：

this.props.navigation.navigate('RouteName', {paramName: 'value'})

2.读取页面组件中的参数的方法：

-可使用this.props.navigation.getParam读取参数
-也可使用 this.props.navigation.state.params做为getParam的替代方案， 若是未指定参数，它的值是 null。因此使用getParam一般更容易，你没必要处理这种状况

配置标题栏

1.每一个页面组件能够有一个名为navigationOptions的静态属性，它是一个对象或一个返回包含各类配置选项的对象的函数。 咱们用于设置标题栏的标题的是title这个属性。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

createStackNavigator默认状况下按照平台惯例设置，因此在iOS上标题居中，在Android上左对齐。

2.调整标题样式
定制标题样式时有三个关键属性：headerStyle、headerTintColor和headerTitleStyle。

headerStyle：一个应用于 header 的最外层 View 的 样式对象， 若是你设置 backgroundColor ，他就是header 的颜色。
headerTintColor：返回按钮和标题都使用这个属性做为它们的颜色。 在下面的例子中，咱们将 tint color 设置为白色（#fff），因此返回按钮和标题栏标题将变为白色。
headerTitleStyle：若是咱们想为标题定制fontFamily，fontWeight和其余Text样式属性，咱们能够用它来完成。

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* render function, etc */
}

3.如何在页面之间共享navigationOptions
将配置移动到 defaultNavigationOptions 属性下的 stack navigator 中.

const AppNavigator = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen
    },
    {
        initialRouteName: "Home",
        defaultNavigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);