Reactjs 如何在屏幕之间导航而不将其添加到react native中的tabNavigation

假设您有一个react本机应用程序，它有一个在数据输入时在屏幕之间导航的流程，您如何在这些屏幕之间导航，而不必将这些屏幕添加到

堆栈导航

或

CreateBoottomTabNavigator

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

(一)

(二)

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

从“React”导入React；
//从“/components/screens/Home”导入HomeView；
从“/containers/addPost”导入AddPostView；
从“/containers/settings”导入设置视图；
从“/components/screens/AddContent”导入ContentView；
从“react native vector icons/AntDesign”导入图标；
从“react navigation”导入{createAppContainer}；
从“/components/screens/Dashboard”导入仪表板视图；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
const AppNavigator=createMaterialBottomTabNavigator(
{
主页：{
screen:AddPostView，//显示标题屏幕是否有办法将屏幕嵌套在此屏幕之外？
导航选项：{
tabBarIcon:（{tintColor}）=>(
)
}
},
内容：{
屏幕：ContentView，//显示添加内容屏幕。
标签为：假，
导航选项：{
塔巴瑞康：错，
tabBarLabel:false
}
},
仪表板：{
屏幕：仪表板视图，
导航选项：{
tabBarIcon:（{tintColor}）=>(
)
}
},
设置：{
屏幕：设置视图，
导航选项：{
tabBarIcon:（{tintColor}）=>(
)
}
}
},
{
初始路由名称：“主页”，
activeColor:#f0edf6“，
tabBarLabel：“内容”，
不活动颜色：“333333”，
酒吧风格：{
背景色：“B9D2B1”，
辩护内容：“中心”，
对齐项目：“中心”
}
}
);
导出默认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
  }
});

import React，{Component，Fragment}来自“React”；
从“react native”导入{视图、文本、按钮、样式表}；
从“react National paper”导入{副标题，对话框}；
从“./forms/createPost/createPost”导入PostForm；
导出默认类AddPostView扩展组件{
状态={
标题：“，
内容：“，
感动：{
标题：假，
内容：假
}
};
标题更改=标题=>{
this.setState（{title}）；
};
验证=字段=>{
console.log（“tet”，字段）；
这是我的国家({
触摸：{…this.state.toucted，[field]：true}
});
console.log（this.state.toucted）；
};
contentChange=content=>{
this.setState（{content}）；
};
render（）{
const isEnabled=this.state.title.length>6？false:true；
返回(
添加条目
this.props.navigation.navigate（“内容”）}
validateTitle={（）=>this.validate（“title”）}
/>
);
}
}
const styles=StyleSheet.create({
标签：{
textAlign：“居中”，
fontWeight：“粗体”，
尺寸：25，
填充：20，
玛金托普：50
}
});

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

1） 创建一个名为otherNav.jsx的新文件（这可以处理不同场景的多个屏幕，现在我只需要它来导航到表单）

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

render（）{
const isEnabled=this.state.title.length>6？false:true；
返回(
添加条目
this.props.navigation.navigate（“内容”）}
validateTitle={（）=>this.validate（“title”）}
/>
);
}
}

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

(一)

---

2）

如果您不想使用导航，可以尝试使用Carasour。我还将其用于分页这看起来更像是一种设计，而不是一种功能。谢谢分享，但这不是我想要使用的方法：（。

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