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 --save
var 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 --save
var 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);