Блог

Я пытаюсь перейти к экрану, который я не определил, 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 помощью? Если да, можно ли скрыть отображение на панели вкладок?

Вам необходимо внести некоторые изменения в app.js . добавьте createBottomTabNavigator в createStackNavigator. Добавьте в 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
  }
});