RN 的scrollable-tab-view控件(同一页面选择切换)

一. 基础选项卡

---

1.引入依赖:

在终端引入依赖:     npm install react-native-scrollable-tab-view –save

---

2. 在   index.ios.js   文件中

import React from 'react';import {    AppRegistry,    Text,    Button,    View,} from 'react-native';var ScrollableTabView = require('react-native-scrollable-tab-view'); //引入控件,并在终端添加依赖    npm install react-native-scrollable-tab-view --savevar MoveList = require("./movieListView"); //也可以引入一个页面使用var MyList = require("./myListView"); //也可以引入一个页面使用var Movie = require("./movieList"); //也可以引入一个页面使用var App = React.createClass({    render() {        return (            <ScrollableTabView>                <MoveList tabLabel="React" />                <Movie tabLabel="Flow" />                <MyList tabLabel="Jest" />            </ScrollableTabView>        );    }});AppRegistry.registerComponent('HelloReactNative', () => App);

---

---

---

---

---

二. 具有导航功能的选项卡

---

---

1.引入依赖

在终端引入依赖:     npm install react-native-scrollable-tab-view –save
在终端引入依赖:     npm install react-navigation –save

---

2. 在   index.ios.js   文件中

import React from 'react';import {    AppRegistry,    Text,    Button,    View,} from 'react-native';import { StackNavigator } from 'react-navigation';var ScrollableTabView = require('react-native-scrollable-tab-view'); //引入控件,并在终端添加依赖    npm install react-native-scrollable-tab-view --savevar MoveList = require("./movieListView"); //也可以引入一个页面使用var MyList = require("./myListView"); //也可以引入一个页面使用var Movie = require("./movieList"); //也可以引入一个页面使用var App = React.createClass({    render() {        return (            <ScrollableTabView                tabBarPosition='bottom' >                {/*tabBarPosition   //可以设置顶部或者底部选项*/}                {/*{...this.props} //指定导航页*/}                <RecentChatsScreen tabLabel="React" {...this.props} />                <AllContactsScreen tabLabel="Flow" {...this.props} />            </ScrollableTabView>        );    }});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>        );    }}class RecentChatsScreen extends React.Component {    render() {        const { navigate } = this.props.navigation;        return (            <View>                <Text>List of recent chats</Text>                <Button                    onPress={() => navigate('Chat', {user: 'Lucy'})} //Passing params                    title="Chat with Lucy"                />            </View>        );    }}class AllContactsScreen extends React.Component {    render() {        const { navigate } = this.props.navigation;        return (            <View>                <Text>List of all contacts</Text>                <Button                    //跳转                    onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params                    title="Chat with Jane"                />            </View>        );    }}App.navigationOptions = {    title: 'My Chats',};const SimpleAppReactNavigation = StackNavigator({    Home: { screen: App },  //第一栈    Chat: { screen: ChatScreen },           //第二栈});AppRegistry.registerComponent('HelloReactNative', () => SimpleAppReactNavigation);