Question

假设您有一个响应本机应用程序，该应用程序具有在输入数据时在各个屏幕之间导航的流程，那么如何在这些屏幕之间导航而不必将这些屏幕添加到stackNavigation或createbottomtabnavigator？ / p>

例如，这是主页上的我的应用程序。

1）

2）

3）它被添加到导航选项卡菜单：（

这是导航代码。

import React from "react";
// import HomeView from "./components/screens/Home";
import AddPostView from "./containers/addPost";
import SettingsView from "./containers/settings";
import ContentView from "./components/screens/AddContent";
import Icon from "react-native-vector-icons/AntDesign";
import { createAppContainer } from "react-navigation";
import DashboardView from "./components/screens/Dashboard";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

const AppNavigator = createMaterialBottomTabNavigator(
  {
    Home: {
      screen: AddPostView, // shows the title screen is there a way i can nest the screens apart of this screen ?
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" color={tintColor} size={24} />
        )
      }
    },
    Content: {
      screen: ContentView, // shows add content screen. 
      labeled: false,
      navigationOptions: {
        tabBarIcon: false,
        tabBarLabel: false
      }
    },
    Dashboard: {
      screen: DashboardView,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="dashboard" color={tintColor} size={24} />
        )
      }
    },
    Settings: {
      screen: SettingsView,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
          <Icon name="user" color={tintColor} size={24} />
        )
      }
    }
  },

  {
    initialRouteName: "Home",
    activeColor: "#f0edf6",
    tabBarLabel: "Content",
    inactiveColor: "#333333",
    barStyle: {
      backgroundColor: "#B9D2B1",
      justifyContent: "center",
      alignItems: "center"
    }
  }
);

export default createAppContainer(AppNavigator);

AddPost.jsx

import React, { Component, Fragment } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import { Subheading, Dialog } from "react-native-paper";
import PostForm from "../forms/createPost/createPost";
export default class AddPostView extends Component {
  state = {
    title: "",
    content: "",
    touched: {
      title: false,
      content: false
    }
  };
  titleChange = title => {
    this.setState({ title });
  };
  validate = field => {
    console.log("tet", field);
    this.setState({
      touched: { ...this.state.touched, [field]: true }
    });
    console.log(this.state.touched);
  };
  contentChange = content => {
    this.setState({ content });
  };

  render() {
    const isEnabled = this.state.title.length > 6 ? false : true;
    return (
      <Fragment>
        <Subheading style={styles.labels}> Add An Entry</Subheading>
        <PostForm
          title={this.state.title}
          titleChange={this.titleChange}
          disButton={isEnabled}
          hasError={this.state.touched}
          onSubmit={() => this.props.navigation.navigate("Content")}
          validateTitle={() => this.validate("title")}
        />
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({
  labels: {
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 25,
    padding: 20,
    marginTop: 50
  }
});

Answer 1

我找到了一种方法。这是我的步骤

1）创建一个名为 otherNav.jsx 的新文件（该文件可以处理不同情况下的多个屏幕，现在我只需要将其导航到表单即可）

import React from "react";
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import ContentView from "./containers/addContent";
import Icon from "react-native-vector-icons/AntDesign";

const OtherNavigation = createStackNavigator(
  {
    Content: {
      screen: ContentView
    }
  },
  {
    headerMode: "none",
    activeColor: "#f0edf6",
    tabBarLabel: "Content",
    inactiveColor: "#333333",
    barStyle: {
      backgroundColor: "#B9D2B1",
      justifyContent: "center",
      alignItems: "center"
    }
  }
);
export default createAppContainer(OtherNavigation);

2）在所有导航都存在的AuthNav中调用此

import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
import AuthLoadingScreen from "./AuthLoadingScreen";
import AuthNavigation from "./splashNav";
import AppNavigator from "./loggedInNav";
import OtherNavigation from "./otherNav";
import { createStackNavigator } from "react-navigation-stack";
export default createAppContainer(
  createStackNavigator(
    {
      AuthLoading: {
        screen: AuthLoadingScreen // intimidiary between App && Auth checks for token and such
      },
      App: AppNavigator,
      Content: OtherNavigation,
      Auth: AuthNavigation 
    },
    {
      initialRouteName: "AuthLoading",
      headerMode: "none"
    }
  )
);

3）现在，这将相应地流动

  render() {
    const isEnabled = this.state.title.length > 6 ? false : true;
    return (
      <Fragment>
        <Subheading style={styles.labels}> Add An Entry</Subheading>
        <PostForm
          title={this.state.title}
          titleChange={this.titleChange}
          disButton={isEnabled}
          hasError={this.state.touched}
          onSubmit={() => this.props.navigation.navigate("Content")}
          validateTitle={() => this.validate("title")}
        />
      </Fragment>
    );
  }
}

所以现在我们有了这个（最终结果未添加到bottomNav）

1）

2）

如何在屏幕之间导航而不将其添加到React Native中的tabNavigation

1 个答案: