创建顶部导航

不管是顶部导航还是底部导航，他都是之前栈路由导航StackNavigator的一部分。
创建的方式也很简单。
使用createMaterialTopTabNavigator， 里面依然是一个配置对象：

const AppTopNavigator = createMaterialTopTabNavigator({
  Page1: {
    screen: Page1,
    navigationOptions: {
      tabBarLabel: "web"
    }
  },
  Page2: {
    screen: Page2,
    navigationOptions: {
      tabBarLabel: "ios"
    }
  },
  Page3: {
    screen: Page3,
    navigationOptions: {
      tabBarLabel: "React"
    }
  },
  Page4: {
    screen: Page3,
    navigationOptions: {
      tabBarLabel: "Vue"
    }
  }
}, {
  tabBarOptions: {
    tabStyle: {minWidth: 50},
    upperCaseLabel: false,
    scrollEnabled: true, // this property set true can scroll the tab
    style: {
      backgroundColor: "#abcdef"
    },
    indicatorStyle: {
      height: 2,
      backgroundColor: "#fff"
    },
    labelStyle: {
      fontSize: 13,
      marginTop: 6,
      marginBottom: 6
    }
  }
})

tabBarLabel: 定义导航项的文本，

tabBarOptions： 是一个配置对象，对整个顶部导航栏进行进行配置。
参考文档传送门

创建底部导航栏

一样的配方， 一样的套路

const AppBottomNavigator = createBottomTabNavigator({
  Page1: {
    screen: Page1,
    navigationOptions: {
      tabBarLabel: "首页",
      tabBarIcon: ({tintColor, focused}) => (
          <Ionicons
              name={"ios-home"}
              style={{color: tintColor}}
              size={26}
          />
      )
    }
  },
  Page2: {
    screen: Page2,
    navigationOptions: {
      tabBarLabel: "趋势",
      tabBarIcon: ({tintColor, focused}) => (
          <Ionicons
              name={"ios-aperture"}
              style={{color: tintColor}}
              size={26}
          />
      )
    }
  },
  Page3: {
    screen: Page3,
    navigationOptions: {
      tabBarLabel: "收藏",
      tabBarIcon: ({tintColor, focused}) => (
          <Ionicons
              name={"ios-chatboxes"}
              style={{color: tintColor}}
              size={26}
          />
      )
    }
  },
  Page4: {
    screen: Page4,
    navigationOptions: {
      tabBarLabel: "我的",
      tabBarIcon: ({tintColor, focused}) => (
          <Ionicons
              name={"ios-bookmarks"}
              style={{color: tintColor}}
              size={26}
          />
      )
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: Platform.OS === 'ios' ? '#abcdef' : "#fff"
  }
})

底部根据平台渲染不同的激活颜色，需要从react-native里面导入Platform。

当然就这样肯定是不能使用的。

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: {}
    // you can set navigationOptions at here
    // you can set navigationOptions at HomePage also
  },
  Page1: {
    screen: Page1,
    navigationOptions: ({ navigation } ) => { // navigation was in props, take it out by use deconstruction assignment
      title: `${navigation.state.params.name}` // dynamic navigation data
    }
  },
  Page2: {
    screen: Page2,
    // here can static appoint what the title it show
    navigationOptions: {
      title: "This is Page2" // static navigation data
    }
  },
  Page3: {
    screen: Page3,
    navigationOptions: (props) => {
      const { navigation } = props
      const { state, setParams } = navigation
      const { params } = state
      return {
        title: params.title ? params.title : "This is Page3",
        headerRight: (
          <Button
              title={params.mode === 'edit' ? '保存' : '编辑'}
              onPress={() => {setParams({mode: params.mode === 'edit' ? '':'edit'})}}/>
        )
      }
    }
  },
  Page4: {
    screen: Page4,
    navigationOptions: {
      title: "This is Page4"
    }
  },
  Bottom: {
    screen: AppBottomNavigator,
    navigationOptions: {
        title: "Bottom Navigator"
    }
  },
  Top: {
    screen: AppTopNavigator,
    navigationOptions: {
      title: "Top Navigator"
    }
  }
}, {
  initialRouteName: "Bottom"
})

在原来的基础上配置了底部和顶部页面，发现这个导航类似于一个页面screen: AppBottomNavigator

使用图标

yarn add react-native-vector-icons
react-native link react-native-vector-icons
react-native run-ios
react-native-vector-icons里面有很多个图标包，根据需要选择合适的。

react-native-vector-icons 传送门

这里使用了Ionicons
import Ionicons from 'react-native-vector-icons/Ionicons.js'
node_modules源文件Ionicons.js里面说明了怎么使用
Usage: <Ionicons name="icon-name" size={20} color="#4F8EF7" />