#react-navigation# 学习重点记录

fyber 发布于2019-08-26 14:05 / 813人阅读

摘要：在上，挂钩到硬件的返回按钮，并在用户按下返回按钮时触发方法，因此它的行为与用户期望的相同。传递参数给路由有个知识点需要将参数包装成一个对象，作为方法的第二个参数传递给路由。默认情况下按照平台惯例设置，所以在上标题居中，在上左对齐。

push 和 navigate的区别

push: 每次调用 push 时, 我们会向导航堆栈中添加新路由。

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

专线服务私有云重点是 php重点 webrtc重点 jsp重点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110025.html

电影天堂React Native 客户端V2.0发布

摘要：电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者，对界面和用户体验都有极高的重视。电影天堂React Native 客户端重新开始！具体更新以https://github.com/XboxYan/DYTT为准。重新开始两年前发布了第一个版本。现在，使用最新的react-native 0.57和全新的设计完成了V2.0 ...

MockingBird 2019-08-23 14:08 评论0 收藏0
react-navigation使用详解

摘要：导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的示例项目报如下的错误，可能是大家使用了命令导致的，解决这个错误的办法就是将删除，然后重新使用命令来安装，最后使用来起服务，应该就不报错了。 react-navigation导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 评论0 收藏0
react-native, react-navigation, redux 学习笔记

摘要：的使用用户发出函数算出新的重新渲染三大原则单一数据源，利用的形式向下传播数据流决定只读，通过修改通过纯函数来修改组件状态，是描述动作的纯函数连接和基于全局的，选择我们要注入的不同的组件分开把注入，读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤锋シ 2019-08-20 17:47 评论0 收藏0
Mobx + React Native 获取路由的状态信息

摘要：年前公司由一个项目是使用来开发的所以遇到了一些问题比较影响开发进程的就是路由问题了实际上就是这个组件比较难懂这里给大家讲解一下希望大家少踩点坑另外本篇文章使用的是环境主要讲解的还是如何使用记录中路由的状态但是会穿插一些小内容这里虽然讲到的是年前公司由一个项目是使用 ReactNative 来开发的所以遇到了一些问题,比较影响开发进程的就是路由问题了,实际上就是 ReactNaviga...

李涛 2019-08-22 14:54 评论0 收藏0