React Navigation 基础 8 : 术语词汇表

最新推荐文章于 2021-09-16 17:08:51 发布

翻译最新推荐文章于 2021-09-16 17:08:51 发布 · 750 阅读

React Navigation 同时被 3 个专栏收录

49 篇文章

订阅专栏

React Native

31 篇文章

订阅专栏

React

25 篇文章

订阅专栏

本文详细介绍了ReactNavigation中的关键概念，如Header（头部）的作用及其组成元素，以及ScreenComponent（屏幕组件）的功能与使用方式。此外，还探讨了navigation属性的重要性，并提供了如何正确使用它的指导。

Header – 头部

也叫做导航头部，导航条，navbar,或许还有其他什么叫法。特指导航栈内某个屏幕最上方的一块矩形区域，包含了返回按钮和屏幕标题（可能还有一些其他东西，比如标题右方可能还会有文字图片按钮等）。这整个矩形区域在React Navigation中被叫做"header"(头部)。

Screen component – 屏幕组件

一个屏幕组件指的是我们的路由配置中所使用的组件：

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,    // <---- 这是一个屏幕组件
    },
    Details: {
      screen: DetailsScreen, // <---- 这也是一个屏幕组件
    },
  },
  {
    initialRouteName: 'Home',
  }
);

屏幕组件类名字中的后缀Screen完全是可选的，可有可无，只不过这是一个常用的约定；你就是把它命名为CasaPantalla(没有后缀Screen)也一样工作。

之前我们看到屏幕组件被提供了属性navigation。这里需要重点指出的是，仅在React Navigation将一个组件作为屏幕组件渲染时才会对其提供该属性。举个例子讲，假如我们将DetailsScreen组件不作为导航栈的路由定义，而是定义为HomeScreen的孩子，那么DetailsScreen就不会被提供navigation属性，也就是说，这种情况下，你在HomeScreen中点击导航到DetailsScreen的按钮，你会看到一个经典javascript错误提示:undefined is not an object。

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')}
        />
        <DetailsScreen />
      </View>
    );
  }
}