假设您有一个react native应用程序,该应用程序具有在输入数据时在各个屏幕之间导航的流程,那么您将如何在这些屏幕之间导航而不必将这些屏幕添加到stackNavigation
或createbottomtabnavigator
?
例如,这是我在首页上的应用。
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
}
});
我找到了一种方法。这是我的步骤
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)