react-navigation之TabNavigator使用
阿新 • • 發佈:2019-02-05
1、效果圖:
index.android.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import {
AppRegistry,
} from 'react-native';
import RecentChatsScreen from './js/RecentChatsScreen'
AppRegistry.registerComponent('GankProject', () => RecentChatsScreen);
RecentChatsScreen.js:
參考資料:https://reactnavigation.org/docs/intro/nesting/** * Created by Administrator on 2017/3/31 0031. */ 'use strict' import React,{Component} from 'react'; import { TabNavigator } from "react-navigation"; import { AppRegistry, Text, } from 'react-native'; class RecentChatsScreen extends React.Component { render() { return <Text>List of recent chats</Text> } } class AllContactsScreen extends React.Component { render() { return <Text>List of all contacts</Text> } } const MainScreenNavigator = TabNavigator({ Recent: { screen: RecentChatsScreen }, All: { screen: AllContactsScreen }, }); export default MainScreenNavigator;