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