导航react-native

2019-01-21 18:08:41 qq934235475 阅读数 225

之前项目一直用的老版本的React-native(0.35.0),新的导航组件一直没有接触,近来想接触,但是找了半天却发现都实现不了,后来终于折腾好了,所以记录一下。

谈组件不写清楚版本完全就是耍流氓!
谈组件不写清楚版本完全就是耍流氓!
谈组件不写清楚版本完全就是耍流氓!

恶心的事儿说三遍!


我所使用的 react-nativereact-navigation以及所需react-native-gesture-handler版本(非常终于,各版本均不一样):

 "react-native": "^0.53.0",
 "react-navigation": "^2.9.1",
 "react-native-gesture-handler": "^1.0.9"

流程步骤:

1,安装控件。

2,主界面入口配置。

3,跳转页面。


一,安装控件 

npm install react-native-gesture-handler@^1.0.9

npm install react-navigation@^2.9.1


二,主界面入口配置 

项目结构:

主界面入口配置:

/**
 * Created by supervons on 2018/12/20.
 * 入口界面,控制路由
 * app entrance interface page
 */

import React, {Component} from 'react';
import {createStackNavigator} from "react-navigation";
import LoginPage from './commonPage/Login/loginPage'
import MainPage from './commonPage/MainPage';
import SignBoardView from './commonPage/SignTest/signBoardView';
import PersonalCenter from './commonPage/personalCenter/personalCenter';

const RootStack = createStackNavigator({
        Login: { //登录界面
            screen: LoginPage
        },
        MainPage: { //主界面
            screen: MainPage
        },
        PersonalCenter: { //我的(个人中心)
            screen: PersonalCenter
        },
        SignBoardView: { //手写签名页面
            screen: SignBoardView
        },

    },
    {//定义配置
        initialRouteName: 'Login',     //设置初始路由为登录界面
        navigationOptions: {           //导航栏通用设置
            headerStyle: {
                backgroundColor: '#7276ff',
            },
        }
    }
)

export default class App extends Component {

    render() {
        return (
            <RootStack/>
        )
    }
}

三,跳转页面 

使用如下即可替换当前页面,不能返回的,可用于登录。

 this.props.navigation.replace('MainPage');

 使用如下即可跳转页面(页面需在入口文件中注册)。

this.props.navigation.push('MainPage');

 

项目示例gitHub:https://github.com/supervons/commonProject 

2016-09-27 15:38:21 chichengjunma 阅读数 4700
  1. github地址:https://github.com/exponentjs/react-native-tab-navigator
  2. 终端运行:npm install react-native-tab-navigator –save下载
  3. 项目中导入 
    import TabNavigator from 'react-native-tab-navigator';
  4. 在render方法当中使用它:
render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '消息'}
                        title="消息"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_message_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_message_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '消息' })}>
                        <MessageComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '联系人'}
                        title="联系人"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '联系人' })}>
                        <ContactComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }

其中可以自定义选中与未选中text和图标的样式,是不是很方便。 
HomeComponent, MessageComponent,ContactComponent为子页面,也要先import 
5. styles:
let styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});

6. 设置默认页:
	constructor(props){
		super(props);
		this.state={
			selectedTab:'首页', //默认页面为“首页”
		}

	}




2017-04-14 22:56:33 sinat_17775997 阅读数 52601

react-navigation

react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新v1.0.0-beta.7) 坑还比较多, 文档和参考资料较少. 正式项目使用还需慎重.http://www.jianshu.com/p/7d435e199c96

有问题找 issues, 基本上坑都在这里.

官方文档

主要构成

按使用形式主要分三部分:

StackNavigator: 类似于普通的Navigator,屏幕上方导航栏
TabNavigator: 相当于iOS里面的TabBarController,屏幕下方的标签栏
DrawerNavigator: 抽屉效果,侧边滑出

StackNavigator 导航栏

API: StackNavigator(RouteConfigs, StackNavigatorConfig)

// 注册导航
const Navs = StackNavigator({
    Home: { screen: Tabs },
    HomeTwo: {
        screen: HomeTwo,  // 必须, 其他都是非必须
        path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking
        navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文
    },
    HomeThree: { screen: HomeThree },
    HomeFour: { screen: HomeFour }
}, {
    initialRouteName: 'Home', // 默认显示界面
    navigationOptions: {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
        header: {  // 导航栏相关设置项
            backTitle: '返回',  // 左上角返回键文字
            style: {
                backgroundColor: '#fff'
            },
            titleStyle: {
                color: 'green'
            }
        },
        cardStack: {
            gesturesEnabled: true
        }
    }, 
    mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); }  // 回调
});

navigationOptions

参数:

  • title: 导航栏的标题

  • header: 导航栏设置对象

    • visible: 导航栏是否显示
    • title: 导航栏的标题, 可以是字符串也可以是个组件
    • backTitle: 左上角的返回键文字, 默认是上一个页面的title
    • right: 导航栏右按钮
    • left: 导航栏左按钮
    • style: 导航栏的style
    • titleStyle: 导航栏的title的style
    • tintColor: 导航栏颜色
  • cardStack: 配置card stack

    • gesturesEnabled: 是否允许右滑返回,在iOS上默认为true,在Android上默认为false

在组件中设置static navigationOptions示例:

static navigationOptions = {
    title: 'homeThree',
    header: (navigation, defaultHeader) => ({
      ...defaultHeader,  // 默认预设
      visible: true  // 覆盖预设中的此项
    }),
    cardStack: {
        gesturesEnabled: false  // 是否可以右滑返回
    }
};

// 或这样
static navigationOptions = {
    // title: 'Two', // 写死标题
    title: (navigation, childRouter) => {  // 动态标题
        if (navigation.state.params.isSelected) {
            return `${navigation.state.params.name}选中`;
        } else {
            return `${navigation.state.params.name}没选中`;
        }
    },
    header: ({ state, setParams, goBack }) => {
        let right;
        if (state.params.isSelected) {
            right = (<Button title="取消" onPress={() => setParams({ isSelected: false })}/>);
        } else {
            right = (<Button title="选择" onPress={() => setParams({ isSelected: true })}/>);
        }
        let left = (<Button title="返回" onPress={() => goBack()}/>);
        let visible = false;  // 是否显示导航栏
        return { right, left, visible };
    },
    // header: {left: <Button title="返回"/>},
};

StackNavigatorConfig

参数:

  • initialRouteName: 设置默认的页面组件,必须是上面已注册的页面组件
  • initialRouteParams: 初始路由的参数
  • navigationOptions: 屏幕导航的默认选项
  • paths: RouteConfigs里面路径设置的映射

  • mode: 页面切换模式:

    • card: 普通app常用的左右切换
    • modal: 上下切换
  • headerMode: 导航栏的显示模式:

    • float: 无透明效果, 默认
    • screen: 有渐变透明效果, 如微信QQ的一样
    • none: 隐藏导航栏
  • cardStyle: 样式

  • onTransitionStart: 页面切换开始时的回调函数

  • onTransitionEnd: 页面切换结束时的回调函数

TabNavigator 标签栏

// 注册tabs
const Tabs = TabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {  // 也可以写在组件的static navigationOptions内
            tabBar: {
                label: '首页',
                icon: ({tintColor}) => (<Image source={require('./app/images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),
            },
        }
    },
    Bill: {
        screen: Bill,
        navigationOptions: {
            tabBar: {
                label: '账单',
               icon: ({tintColor}) => (<Image source={require('./app/images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),
            },
        }
    },
    Me: {
        screen: Me,
        navigationOptions: {
            tabBar: {
                label: '我',
                icon: ({tintColor}) => (<Image source={require('./app/images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),
            },
        }
    }
  }, {
      animationEnabled: false, // 切换页面时是否有动画效果
      tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的
      swipeEnabled: false, // 是否可以左右滑动切换tab
      backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
      tabBarOptions: {
          activeTintColor: '#ff8500', // 文字和图片选中颜色
          inactiveTintColor: '#999', // 文字和图片未选中颜色
          showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
          indicatorStyle: {
              height: 0  // 如TabBar下面显示有一条线,可以设高度为0后隐藏
          }, 
          style: {
              backgroundColor: '#fff', // TabBar 背景色
              // height: 44
          },
          labelStyle: {
              fontSize: 10, // 文字大小
          },
      },
});

DrawerNavigator抽屉

const DrawerNav = DrawerNavigator({
    Home: { screen: Home },
    Bill: { screen: Bill },
    Me: { screen: Me },
    HomeTwo: { screen: HomeTwo },
    HomeThree: { screen: HomeThree },
    HomeFour: { screen: HomeFour },
    BillTwo: { screen: BillTwo },
    BillThree: { screen: BillThree }
}, {
    drawerWidth: 200, // 抽屉宽
    drawerPosition: 'left', // 抽屉在左边还是右边
    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件
    contentOptions: {
      initialRouteName: Home, // 默认页面组件
      activeTintColor: 'white',  // 选中文字颜色
      activeBackgroundColor: '#ff8500', // 选中背景颜色
      inactiveTintColor: '#666',  // 未选中文字颜色
      inactiveBackgroundColor: '#fff', // 未选中背景颜色
      style: {  // 样式

      }
    }
});

navigation

StackNavigator中注册后的组件都有navigation这个属性. navigation又有5个参数:navigategoBackstatesetParamsdispatch, 可以在组件下console.log一下this.props就能看到.

  • this.props.navigation.navigate('Two', { name: 'two' }): push下一个页面

    • routeName: 注册过的目标路由名称
    • params: 传递的参数
    • action: 如果该界面是一个navigator的话,将运行这个sub-action
  • this.props.navigation.goBack(): 返回上一页

  • this.props.navigation.state: 每个界面通过这去访问它的router,state其中包括了:

    • routeName: 路由名
    • key: 路由身份标识
    • params: 参数
  • this.props.navigation.setParams: 该方法允许界面更改router中的参数,可以用来动态的更改导航栏的内容

  • this.props.navigation.dispatch: 可以dispatch一些action,主要支持的action有:

    • Navigate:

        import { NavigationActions } from 'react-navigation'
      
        const navigationAction = NavigationActions.navigate({
          routeName: 'Profile',
          params: {},
      
          // navigate can have a nested navigate action that will be run inside the child router
          action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
        })
        this.props.navigation.dispatch(navigationAction)
    • Reset: Reset方法会清除原来的路由记录,添加上新设置的路由信息, 可以指定多个action,index是指定默认显示的那个路由页面, 注意不要越界了

        import { NavigationActions } from 'react-navigation'
      
        const resetAction = NavigationActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({ routeName: 'Profile'}),
            NavigationActions.navigate({ routeName: 'Two'})
          ]
        })
        this.props.navigation.dispatch(resetAction)
    • SetParams: 为指定的router更新参数,该参数必须是已经存在于router的param中

        import { NavigationActions } from 'react-navigation'
      
        const setParamsAction = NavigationActions.setParams({
          params: {}, // these are the new params that will be merged into the existing route params
          // The key of the route that should get the new params
          key: 'screen-123',
        })
        this.props.navigation.dispatch(setParamsAction)

Navigation Actions

  • 支持以下actions:
    • Navigate:
    • Reset:
    • Back:
    • Set Params:
    • Init:

Deep Link

其他app或浏览器使用url打开次app并进入指定页面. 如浏览器输入url demo4://home/home3直接进入home3页面.

iOS版设置

  1. 使用Xcode设置Schemes;
  2. AppDelegate添加一下代码:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}
  1. js组件在注册路由时设置唯一的路径path, 例如Home2: { screen: Home2, path:'app/Home2' };
  2. 在手机浏览器访问demo4://app/Home2, 弹窗选择打开, 就可以打开demo4 app并进到Home2页面了.
2017-05-27 15:38:48 u011468619 阅读数 24496
首先要确认已经配置好react-native的环境。

 


 
# 创建一个native应用,SimpleApp
# 然后进入项目目录 react-native init SimpleApp cd SimpleApp 
# 通过npm安装最新版本的react-navigation npm install --save react-navigation 
# 运行程序 react-native run-android

 

 

 

引入Stack Navigator

对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个概念的“堆栈”导航,其中每个新屏幕都放在堆栈顶部,然后从堆栈顶部移除一个屏幕。


 
import React from 'react';

import {

AppRegistry,

Text,

} from 'react-native';

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {

static navigationOptions = {

title: 'Welcome world',

};

render() {

return <Text>Hello, Navigation!</Text>;

}

}

const SimpleApp = StackNavigator({

Home: { screen: HomeScreen },

});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

 

屏幕的title在静态导航选项中是可配置的,在这里可以设置许多选项来配置导航器中的屏幕显示。

 

添加一个新的屏幕


 
class ChatScreen extends React.Component {

static navigationOptions = {

title: 'Chat with Lucy',

};

render() {

return (

<View>

<Text>Chat with Lucy</Text>

</View>

);

}

}

 

然后在HomeScreen添加一个按钮,链接到ChatScreen

 

class HomeScreen extends React.Component {

static navigationOptions = {

title: 'Welcome',

};

render() {

const { navigate } = this.props.navigation;

return (

<View>

<Text>Hello, Chat App!</Text>

<Button

onPress={() => navigate('Chat')}

title="Chat with Lucy"

/>

</View>

);

}

 

 

最后将添加的两个页面添加到StackNavigator中

const SimpleApp = StackNavigator({

Home: { screen: HomeScreen },

Chat: { screen: ChatScreen },

});

 

在这里,可以传递参数,从HomeScreen传递

class HomeScreen extends React.Component {

static navigationOptions = {

title: 'Welcome',

};

render() {

const { navigate } = this.props.navigation;

return (

<View>

<Text>Hello, Chat App!</Text>

<Button

onPress={() => navigate('Chat', { user: 'Lucy' })}

title="Chat with Lucy"

/>

</View>

);

}

}

 

ChatScreen接收参数

class ChatScreen extends React.Component {

// Nav options can be defined as a function of the screen's props:

static navigationOptions = ({ navigation }) => ({

title: `Chat with ${navigation.state.params.user}`,

});

render() {

// The screen's current route is passed in to `props.navigation.state`:

const { params } = this.props.navigation.state;

return (

<View>

<Text>Chat with {params.user}</Text>

</View>

);

}

}

 

 

添加第三个页面,Three.js, ChatScreen跳转到Three


 
import React,{Component} from 'react';

import {

AppRegistry,

Text,

View,

Button,

} from 'react-native';

class Three extends React.Component {

static navigationOptions = {

title: 'Three Sceen',

};

render() {

const { goBack } = this.props.navigation;

return (

<Button

title="Go back"

onPress={() => goBack()}

/>

);

}

}

export default Three;

 

修改ChatScreen的配置

class ChatScreen extends React.Component {

static navigationOptions = {

title: 'Chat with Lucy',

};

render() {

const { navigate } = this.props.navigation;

return (

<View>

<Text>Chat with Lucy</Text>

<Button

onPress={() => navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}



 

最后的结果如下:

 

 

 

 

 

 

 

最后给出完整代码

 

文件 index.android.js

i

mport SimpleApp from './App';

 

文件App.js

import React from 'react';

import {

AppRegistry,

Text,

View,

Button,

} from 'react-native';

import { StackNavigator } from 'react-navigation';

import ThreeScreen from './Three.js';



class HomeScreen extends React.Component {

static navigationOptions = {

title: 'Welcome',

};

render() {

const { navigate } = this.props.navigation;

return (

<View>

<Text>Hello, Chat App!</Text>

<Button

onPress={() => navigate('Chat')}

title="Chat with Lucy"

/>

</View>

);

}

}



class ChatScreen extends React.Component {

static navigationOptions = {

title: 'Chat with Lucy',

};

render() {

const { navigate } = this.props.navigation;

return (

<View>

<Text>Chat with Lucy</Text>

<Button

onPress={() => navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}



const SimpleApp = StackNavigator({

Home: { screen: HomeScreen },

Chat: { screen: ChatScreen },

Three: { screen: ThreeScreen},

});



AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

 

文件Three.js

import React,{Component} from 'react';

import {

AppRegistry,

Text,

View,

Button,

} from 'react-native';



class Three extends React.Component {

static navigationOptions = {

title: 'Three Sceen',

};

render() {

const { goBack } = this.props.navigation;

return (

<Button

title="Go back"

onPress={() => goBack()}

/>

);

}

}

export default Three;

 

 

2018-07-31 21:00:00 weixin_34294649 阅读数 157

引言

react-native-router-flux 是一个基于 react-navigation 路由框架,进一步简化了页面跳转的步骤,并且一直随着 react-navigation升级更新版本。而且使用这个框架的话,可以将全部的页面跳转的处理逻辑都写在一个地方,方便了后续的维护。

先来个简单的demo

如何导入 react-native-router-flux 这个可以看官网,这里我就直接上代码了:

const Root = () => {
  return (
    <Router>
      {/* 这种写法是将全部的跳转页面都放在Root下面 */}
      <Scene key="root">
        {/* key 就是给页面的标签,供Actions使用 */}
        {/* component 设置关联的页面 */}
        {/* title 就是给页面标题 */}
        {/* initial 就是设置默认页面*/}
        <Scene
          key="one"
          component={PageOne}
          title="PageOne"
          initial={true}
        />
        <Scene key="two" component={PageTwo} title="PageTwo" />
      </Scene>
    </Router>
  );
};

PageOne 的核心代码,点击 Text 跳转到下一个页面:

//导入Action的包,处理页面跳转
import { Actions } from 'react-native-router-flux'; 

const PageOne = () => {
  return (
    <View style={styles.container}>
      <Text
        style={styles.welcome}
        onPress={()=>Actions.two()}
      >
        我是Page One
      </Text>
    </View>
  );
};

PageTwo 的核心代码:

export default class PageTwo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>我是Page Two </Text>
      </View>
    )
  }
}

数据传递与刷新

页面之间的切换自然不会缺少数据的传递,而且这个路由框架可以实时 refresh 当前页面。

先看页面之间传递数据吧,这里添加一个 PageThree 吧:

import {Actions} from "react-native-router-flux"

const PageThree = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}
        //Actions.pop是退回到上一层
        onPress={() => Actions.pop({
          //refresh用于刷新数据
          refresh: {
            data: '从 three 回到 two'
          }
        })}
      >我是Page Three </Text>
    </View>
  );
};

很自然的,PageTwo 也要修改一下代码:

import {Actions} from 'react-native-router-flux'; // New code

export default class PageTwo extends Component {
  render() {
    const data = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          //添加点击事件并传递数据到PageThree
          onPress={() => Actions.three({data: "从 two 传递到 three"})}
        >我是Page Two </Text>
       <Text style={styles.refresh}
        //展示从PageThree传回来的数据
        >refresh:{data}</Text>
      </View>
    )
  }
}

最后到 Root.js 添加新的 Scence :

const Root = () => {
  return (
    <Router>
      <Scene>
        //...........
        <Scene
          key="three"
          component={PageThree}
          title="PageThree"
        />
      </Scene>
    </Router>
  );
};

可以看到从 PageThree 回到 PageTwo 数据传递并刷新页面的效果,不过如果需要实时刷新当前页面呢?这时就需要使用 Actions.refresh 方法了:

export default class PageTwo extends Component {
  render() {
    const data = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          onPress={() => Actions.three({data: "从 two 传递到 three"})}
        >我是Page Two </Text>
        <Text
          style={styles.refresh}
          onPress={() => Actions.refresh({
            data: 'Changed data',
          })}
        >refresh:{data}</Text>
      </View>
    )
  }
}

 

Tab Scene

通过设置 Scene 属性的 Tabs 可以设置 Tabs 。这个也开发中经常用到的页面效果

//设置tab选中时的字体颜色和标题
const TabIcon = ({focused , title}) => {
  return (
    <Text style={{color: focused  ? 'blue' : 'black'}}>{title}</Text>
  );
};

const Root = () => {
  return (<Router>
    {/*tabBarPosition设置tab是在top还是bottom */}
    <Scene hideNavBar tabBarPosition="bottom">
      <Tabs
        key="tabbar"
        swipeEnabled
        wrap={false}
        // 是否显示标签栏文字
        showLabel={false}
        tabBarStyle={{backgroundColor: "#eee"}}
        //tab选中的颜色
        activeBackgroundColor="white"
        //tab没选中的颜色
        inactiveBackgroundColor="red"
      >
        <Scene
          key="one"
          icon={TabIcon}
          component={PageOne}
          title="PageOne"
        />

        <Scene
          key="two"
          component={PageTwo}
          title="PageTwo"
          icon={TabIcon}
        />

        <Scene
          key="three"
          component={PageThree}
          title="PageThree"
          icon={TabIcon}
        />
      </Tabs>
    </Scene>
  </Router>)
};

此时运行就可以看到下面的效果:

这里写图片描述