React native 如何在react native中实现选项卡导航？

我正在react native中创建一个新的应用程序。在登录屏幕中，我尝试实现选项卡导航。我想在

登录表单

和

注册表单

之间导航。实际上，我不想导航到其他页面。我尝试在这两个

表单

之间导航（就像在coursera应用程序中一样）。可能吗？我不知道如何实现这一点

下面是react中的代码

<Container>
    <View style={styles.container}>
        <View style={styles.content}>
            <InputGroup style={styles.input}>
                <Input
                    label="Email"
                    placeholder="email@gmail.com"   />
                <Image source={require('../Images/envelope.png')} style={{width:30, height:30, marginRight:5}} />
            </InputGroup>
            <InputGroup style={styles.input}>

                <Input
                    label="Password"
                    placeholder="Password"
                    secureTextEntry />
                <Image source={require('../Images/lock.png')} style={{width:30, height:30, marginRight:5}} />

            </InputGroup>
            {this.state.isLoading ? ( <Spinner size="small" color="#000000" />
            ) : (
                <Button style={styles.button} onPress={() => this.onPressLogin()} >
                    <Text style={{paddingLeft:50}}>Login</Text>
                </Button>
            )}

            <Tabs selected={this.state.page} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}>

                <Text name="first" selectedIconStyle={{borderTopColor: 'red',borderTopWidth:2}}>Login</Text>
                <Text name="second" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Register</Text>
            </Tabs>
        </View>

    </View>
</Container>

{this.state.isLoading？（
) : (
this.onPressLogin（）}>
登录
)}
this.setState（{page:el.props.name}}>
登录
登记

以下是主屏幕的屏幕截图

这就是你想要的吗

如果是这样，实施起来并不难

首先，安装

react导航

模块：

npm install --save react-navigation

其次，您提到您不想制作两个屏幕。然而，在这种情况下，它们实际上仍然是两个独立的屏幕。让我们继续制作两个屏幕：

LoginScreen

和

RegisterScreen

，如下所示：

// This is LoginScreen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'react-native-elements';

class LoginScreen extends Component {
    // This is for the tab bar configuration
    static navigationOptions = {
        title: 'Login',
        header: null,
        tabBarIcon: ({ tintColor }) => {
            return (<Icon name='input' size={30} color={tintColor} />)
        }
    };

    render() {
        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    Login Screen
                </Text>
            </View>
        );
    }
}

export default LoginScreen;

// This is RegisterScreen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'react-native-elements';

class RegisterScreen extends Component {
    static navigationOptions = {
        title: 'Register',
        header: null,
        tabBarIcon: ({ tintColor }) => {
            return (<Icon name='person-add' size={30} color={tintColor} />)
        }
    };

    render() {
        return (
            <View style={{ ... }}>
                <Text style={{ ... }}>
                    Register Screen
                </Text>
            </View>
        );
    }
}

export default RegisterScreen;

简单的流代码

import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppContainer = createAppContainer(TabNavigator);

// without the style you will see a blank screen
export default () => (
  <View style={{ flex: 1 }}>
    <AppContainer />
  </View>
);

从“React”导入React；
从“react native”导入{Text，View}；
从“react navigation”导入{createAppContainer}；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
类主屏幕扩展了React.Component{
render（）{
返回(
回家！
);
}
}
类设置屏幕扩展React.Component{
render（）{
返回(
设置！
);
}
}
const TabNavigator=createBottomTabNavigator({
主页：主屏幕，
设置：设置屏幕，
});
const AppContainer=createAppContainer（TabNavigator）；
//如果没有样式，您将看到一个空白屏幕
导出默认值（）=>(
);

那么你是说你需要在一个

页面中
登录
和
注册
表单代码，并根据选项卡显示
登录
和
注册
表单？不知道怎么做..你需要使用它。
import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

const AppContainer = createAppContainer(TabNavigator);

// without the style you will see a blank screen
export default () => (
  <View style={{ flex: 1 }}>
    <AppContainer />
  </View>
);