Question

我正在尝试对原生应用做出反应。

我创建了一个应用程序，截至目前已有3个屏幕。

登陆屏幕，主屏幕＆amp;设置屏幕。我想要的是用户登陆登陆屏幕并显示两个标签（Home＆amp; Settings）。

我取得的成就是用户登陆主屏幕并显示两个标签，但我无法将登陆屏幕设为默认页面。

示例应用程序可在snack.expo.io

获得

任何帮助将不胜感激。

App.js

import React from 'react';
import { Text, View } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation'; // 1.0.0-beta.27

import { Icon } from 'react-native-elements'; // 0.19.0

import "@expo/vector-icons"; // 6.3.1

class LandingScreen extends React.Component {
  static navigationOptions = {
       title: "Landing Screen", 
       tabBarLabel: "Landing",
       tabBarIcon: ({ tintColor }) => <Icon name="menu" size={35} color={tintColor} />,
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Landing!</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
       title: "Home Screen", 
       tabBarLabel: "Home",
       tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  static navigationOptions = {
       title: "Settings Screen", 
       tabBarLabel: "Settings",
       tabBarIcon: ({ tintColor }) => <Icon name="loyalty" size={35} color={tintColor} />,
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const MainTabNav = TabNavigator(
  {
    Home: { 
      screen: HomeScreen,
    },
    Settings: { 
      screen: SettingsScreen,
    },
  },  
  {
    tabBarOptions: 
    {
      showIcon: true
    }
  }
);

const MainStackNav = StackNavigator(
  {
    Function: {
      screen: MainTabNav,
    },
    Landing: {
      screen: LandingScreen,
    },
  }
);

export default MainStackNav;

Answer 1

我可以向您推荐这个medium article，它解释了如何为react-native应用程序设置一个非常常见的身份验证流程。

它实现了两个不同的StackNavigator。一个是客人，一个是你登录的时候。

然后你会找到一个TabNavigator，你也可以在其中嵌套其他stacknavigator。

添加导航以响应本机应用

1 个答案: