react-native - 在 React Native 中导航到未使用 createBottomTabNavigator 定义的屏幕

Question

我正在尝试导航到我尚未定义的屏幕，createBottomTabNavigation因为我不希望它显示在底部选项卡导航中。

为了尝试，我单独创建了组件：

class SingleScreen extends React.Component {
    render() {
        return (
            <View>
                <Text>This is sigle screen</Text>
            </View>
        );
    }
}

要导航到此屏幕：

render () {
  const {navigate} = this.props.navigation;
  return(
    <TouchableHighlight onPress={() => navigate('SingleScreen', {id: 'id', from: 'Search'})}>
    //Code
    </TouchableHighlight>
  );
}

但不工作。我必须用 来描述这个屏幕createBottomTabNavigator吗？如果是这样，是否可以隐藏在标签栏上？

标签： react-native

Answer 1

您需要在 app.js 中进行一些更改。在 createStackNavigator 中添加 createBottomTabNavigator。将那些组件添加到您不想添加到底部选项卡导航器的 stacknavigator 中。在 createBottomTabNavigator 中添加要在标签栏中显示的组件

请检查以下代码

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Dimensions
} from "react-native";
import { createStackNavigator, createDrawerNavigator } from "react-navigation";
import LoginScreen from "./Screens/LoginScreen";
export default class App extends Component {
  render() {
    return <StackNav />;
  }
}
const StackNav = createStackNavigator(
  {
    TabNavigator: {
      screen: AppTabNavigator,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    SingleScreen: {
      screen: SingleScreen,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    },
    SecondScreen: {
      screen: SecondScreen,
      navigationOptions: {
        headerMode: "none",
        header: null
      }
    }
  },
  {
    initialRouteName: "TabNavigator"
  }
);
const AppTabNavigator = createBottomTabNavigator({
  Login: {
    screen: LoginScreen
  }
});