What is react-navigation?

[zhouzhongyuan]

• v1 Roadmap

• react-navigation github

• react-navigation docs

• Maximally Modular Apps with React Navigation - Eric Vicenti aka @ericvicenti at @ReactEurope 2017 - YouTube

[zhouzhongyuan]

• Header is only available for StackNavigator. TabNavigator肯定就不能控制Header了。

Resolved

How does StackNavigator work?

What determines the height of TabNavigator's tabBar?

[zhouzhongyuan]

文中代码

入口文件： src/react-navigation.js

module.exports = {
  // Core
  get createNavigationContainer() {
    return require('./createNavigationContainer').default;
  },
}

这种写法的作用：有时候希望访问属性时能返回一个动态计算后的值, 或希望不通过使用明确的方法调用而显示内部变量的状态。

简单的解释代码

代码1：

var person ={
    name: "zhongyuan",
}

代码2：

var person = {
    get name(){
        return "zhongyuan";
    }
}

在取person.name值的时候，效果是一样。 参考getter MDN

[zhouzhongyuan]

探究

收获

• react-navigation实际上就是通过state来管理router。

1. 最简单的StackNavigator是如何渲染的？

What is navigator?

• Navigators allow you to define your application's navigation structure.
• Navigators also render common elements such as headers and tab bars which you can configure.
• Under the hood, navigators are plain React components.

What is router?

• Routers define a component's navigation state, and they allow the developer to define paths and actions that can be handled.

用到了哪几个 api ?

• CardStack的SceneComponent是关键部分，是我们写的组件。

2. StackNavigator如何进行切换？

2.1 如何进入？

即this.props.navigation.navigate('chat')做了什么？

2.1.1 this.props.navigation.navigate从哪儿来的？

应该首先看

• The Navigation Prop | React Navigation

Answer:

navigate in react-navigation/src/addNavigationHelpers.js

addNavigationHelpers in react-navigation/src/createNavigationContainer.js  

Answer:

navigate
dispatch
setState

2.2 如何返回？

2.3 router的历史信息记录在哪里？

It saves at StackRouter.js.

[zhouzhongyuan]

How does StackNavigator work?

• 20170927

The simplest usage of StackNavigator is like below:

Code:

``` class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { return Hello, Navigation!; } } const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); ```

渲染示意图

[zhouzhongyuan]

How does cardStyle work?

[zhouzhongyuan]

What determines the height of TabNavigator's tabBar?

Simple code

```javascript class RecentChatsScreen extends React.Component { render() { return List of recent chats } } class AllContactsScreen extends React.Component { render() { return List of all contacts } } const MainScreenNavigator = TabNavigator({ Recent: {screen: RecentChatsScreen}, All: {screen: AllContactsScreen}, }, { tabBarPosition: 'bottom', }); ```

Style

What determines the height of TabNavigator's tabBar ? aka, the height of blue area in "Style" picture.

• Text: 本身18px + 上下8px margin
• 包裹Text的View: 上下8px padding

总计50px。

Answer: font-size(Text), margin(Text), padding(View)

[zhouzhongyuan]

How does goBack work?

navigation includes: index key routeName routes