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描述此屏幕吗？如果是这样，是否有可能隐藏在选项卡栏上？

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
  }
});

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

1 个答案: