我想从订单屏幕导航到主屏幕，但他不能很好地工作，路线中的每个屏幕都可以工作，但是主屏幕没有，请回到我的地图屏幕，我想要主屏幕不是地图!!我已经告诉他们导航到Home。
这是我正在走路的结构
首页 - >地图 - >订单，然后订购 - >首页
在家里，我有代码下的侧面菜单抽屉检查。
Route.js
import React, { Component } from 'react';
import {
View,
TouchableOpacity,
} from 'react-native';
//Import required react-navigation component
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createSwitchNavigator
} from 'react-navigation';
//Import all the screens for Drawer/ Sidebar
import Home from "../screens/Home";
import Splash from "../screens/Splash";
import SignUp from "../screens/SignUp";
import SignIn from "../screens/SignIn";
import ForgetPassword from "../screens/ForgetPassword";
import Order from "../screens/Order";
import MapApp from "../screens/MapApp";
import Profile from "../screens/Profile";
import Icon from 'react-native-vector-icons/Ionicons';
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
//Structure for the navigatin Drawer
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Icon name="md-menu" size={30} color='#fff' style={{ marginLeft: 10 }} />
</TouchableOpacity>
</View>
);
}
}
// Stack Navigator for app
const AuthStackNavigator = createStackNavigator({
//All the screen from the Screen1 will be indexed here
SignUp: {
screen: SignUp,
navigationOptions: () => ({
// header: null
title: "Sign Up",
headerLeft: null,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
})
},
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Sign In",
headerRight: <View />,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
},
ForgetPassword: {
screen: ForgetPassword,
navigationOptions: {
title: "Forget Password",
headerRight: <View />,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
},
});
//Stack Navigator for First Option of Navigation Drawer
const HomeDrawer = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: 'Home',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerRight: <View />,
headerStyle: {
backgroundColor: '#258fdb',
shadowOpacity: 0,
elevation: 0,
marginBottom: 20
},
headerTintColor: '#fff',
headerTitleStyle: {
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}),
},
MapApp: {
screen: MapApp,
navigationOptions: {
title: "Map",
headerRight: <View />,
headerLeft: <View />,
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#258fdb",
borderBottomColor: "white",
},
headerTitleStyle: {
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
}
});
//Stack Navigator for Second Option of Navigation Drawer
const OrderDrawer = createStackNavigator({
Order: {
screen: Order,
navigationOptions: ({ navigation }) => ({
title: 'Order',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#258fdb',
},
headerTintColor: '#fff',
}),
},
});
const ProfileDrawer = createStackNavigator({
Profile: {
screen: Profile,
navigationOptions: ({ navigation }) => ({
title: 'Profile',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#258fdb',
},
headerTintColor: '#fff',
}),
},
})
//Drawer Navigator for the Navigation Drawer / Sidebar
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeDrawer,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon name="ios-home" size={30} color='#0496FF' />
),
},
},
Order: {
screen: OrderDrawer,
navigationOptions: {
drawerLabel: 'Order',
drawerIcon: () => (
<Icon name="ios-list-box" size={30} color='#0496FF' />
),
},
},
Profile: {
screen: ProfileDrawer,
navigationOptions: {
drawerLabel: 'Profile',
drawerIcon: () => (
<Icon name="ios-contact" size={30} color='#0496FF' />
),
},
},
});
const Navigations = createSwitchNavigator({
Authloading: Splash,
Auth: AuthStackNavigator, // the Auth stack
App: DrawerNavigator, // the App stack
})
export default MyApp = createAppContainer(Navigations);
Order.js
import React, { Component } from 'react';
import styles from "../Style/styles";
import firebase from "react-native-firebase";
import ImagePicker from "react-native-image-picker";
import { View, Text, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, Image } from 'react-native';
// create a component
class Order extends Component {
constructor(props) {
super(props);
this.state = {
userId: null,
nameOfProblem: '',
description: '',
imageOfPrblem: '',
timeDate: {},
providerId: this.props.navigation.dangerouslyGetParent().getParam('providerId'),
}
}
componentDidMount() {
const userId = firebase.auth().currentUser.uid;
this.setState({ userId });
}
handleOrder = () => {
const { nameOfProblem, description, userId, imageOfPrblem, providerId } = this.state;
const PushData = firebase.database().ref("request/" + providerId + "/" + userId + "/orders/");
const ref = firebase.storage().ref("users/" + userId + "/UserImageOrders/" + path);
let file = imageOfPrblem.uri;
const path = "img_" + imageOfPrblem.fileName;
if (file) {
return (
PushData.update({
nameOfProblem: nameOfProblem,
description: description,
// ...this.state.nameOfProblem,
// ...this.state.description,
imageOfPrblem: imageOfPrblem
}).then(() => {
ref.put(file).then(() => {
console.log("File uploaded..")
setTimeout(() => {
this.props.navigation.navigate("Home"); // not working and get me back to Map screen, but when i navigate to other screen it's work fine!
}, 3000);
});
})
)
}
else {
return (
PushData.push({
nameOfProblem: nameOfProblem,
description: description,
}).then(() => {
setTimeout(() => {
this.props.navigation.navigate("Home"); // Not work
}, 3000);
})
)
}
// else {
// }
}
handleImages = () => {
const options = {
title: "Select Images!",
storageOptions: {
skipBackup: true,
path: "images"
}
};
ImagePicker.showImagePicker(options, response => {
console.log("Response = ", response);
if (response.uri) {
this.setState({ imageOfPrblem: response });
}
if (response.didCancel) {
console.log("User cancelled image picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
alert(response.customButton);
}
});
};
render() {
const { nameOfProblem, description, imageOfPrblem, timeDate } = this.state;
const { getParam } = this.props.navigation.dangerouslyGetParent();
const providerId = getParam('providerId');
const providerName = getParam('providerName');
return (
<ScrollView scrollEnabled={true}>
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={70}>
<View style={[styles.container, { marginTop: 20 }]}>
<Text>Send Order To: {JSON.stringify(providerName)}, ID:{JSON.stringify(providerId)}</Text>
<TextInput
style={styles.textInput}
placeholder="Name of Problem"
value={nameOfProblem}
onChangeText={(nameOfProblem) => this.setState({ nameOfProblem })}
returnKeyType="next"
returnKeyLabel="next"
/>
<TextInput
style={[styles.textInput, {
borderRadius: 5,
borderWidth: 1,
height: 120,
fontSize: 16,
padding: 10,
marginTop: 8
}]}
placeholder="Description"
multiline={true}
numberOfLines={12}
textAlignVertical="top"
value={description}
onChangeText={(description) => this.setState({ description })}
returnKeyType="next"
returnKeyLabel="next"
/>
<TouchableOpacity onPress={this.handleImages}>
<View
style={{
backgroundColor: "#DBDBDB",
borderRadius: 100,
alignSelf: "center",
margin: 10,
paddingBottom: 2,
width: 120,
height: 120
}}
>
<Text
style={{
position: "absolute",
zIndex: 1,
fontSize: 40,
top: 67,
color: "#1567d3",
left: 99
}}
>
+
</Text>
<Image
source={{ uri: imageOfPrblem.uri }}
style={[styles.uploadAvatar, { borderRadius: 100 }]}
resizeMode="cover"
/>
</View>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: "#1567d3" }]}
onPress={this.handleOrder}
>
<Text style={{ color: "#fff", fontSize: 18 }}>Send</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
);
}
}
// define your styles
//make this component available to the app
export default Order;
你有两条名为“Home”的路线，一条在HomeDrawer，另一条在DrawerNavigator。重命名DrawerNavigator中的那个，它应该导航到正确的“Home”。
例如：
HomeDrawer: { // renamed this from Home to HomeDrawer
screen: HomeDrawer,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon name="ios-home" size={30} color='#0496FF' />
),
},
},
导出Home.js时，像这样导出它（使用withNavigation）。
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { withNavigation } from 'react-navigation';
class Home extends Component {
render() {
return (
<View>
<Text> Home </Text>
</View>
)
}
}
export default withNavigation(Home);