从子组件反应本机导航

时间:2019-12-07 03:11:32

标签: reactjs react-native react-navigation react-native-navigation

我正在尝试在屏幕之间实现简单的导航,但是出现此错误:

Undefined is not an object 'this.props.navigate'

AppNavigator.js

let AppNavigator = createStackNavigator({
  Signup: 
  { screen: SignupScreen, 
    navigationOptions: {
      header: null
    }

  },
  Login: { screen: LoginScreen,
    navigationOptions: {
      header: null
    } 
  },
},{
  initialRouteName: "Signup"
});

SignupScreen.js

<View>
 <SignupForm/>
</View>

SignupForm.js

const { navigate } = this.props.navigation;
<Text onPress={() =>
       navigate('Login')
}>
 ¿Allready have an account? Sign in
</Text>

我想问题是在子组件情况下还有其他事情要做。请帮忙。

3 个答案:

答案 0 :(得分:1)

您应将navigation传递给SignupForm。从下面选择2个解决方案之一

1。

<View>
 <SignupForm navigation={this.props.navigation} />
</View>

  1. 在SignupForm.js中
import { withNavigation } from 'react-navigation';

export default withNavigation(SignupForm);

答案 1 :(得分:0)

如果使用单独的组件,则必须使用withNavigation,请参阅有关withNavigation的文档:here

答案 2 :(得分:0)

在其他地方使用AppNavigator之前,您可能会错过将NavigationContainer包裹在import { createAppContainer } from 'react-navigation'; // add this import { createStackNavigator } from 'react-navigation-stack'; // i trust you've already got this let AppNavigator = createStackNavigator({ Signup: { screen: SignupScreen, navigationOptions: { header: null } }, Login: { screen: LoginScreen, navigationOptions: { header: null } }, },{ initialRouteName: "Signup" }); export default createAppContainer(AppNavigator); // this is important! 中的情况。

在您的 AppNavigator.js

AppContainer

实际上,我认为您不需要为使子组件正常工作而做任何特别的事情。 package controllers; import helpers.InputHelper; import helpers.InputHelper; import repositories.Repository; import model.Restaurant; import model.Review; public class RestaurantController { InputHelper inputHelper = new InputHelper(); char c = inputHelper.readCharacter("A:Restaurant Name -B: Review -C: Location -D: Rating"); static char DELIMITER=','; **private final Repository repository;** public void run() { boolean quit = false; do { char choice = displayMenu(); switch (choice) { case 'A': addRestaurant(); String name = inputHelper.readString("Enter Restaurant Name: "); repository.store(name); System.out.println("Restaurant Name is: " + name); break; case 'B': addReview(); String review = inputHelper.readString("Enter Restaurant Review: "); repository.store(review); break; case 'C': listLocationRestaurantDataInNameOrder(); String location = inputHelper.readString("Enter Restaurant Location : "); repository.store(location); break; case 'D': listRestaurantRatings(); String rating = inputHelper.readString("Enter Restaurant Rating : "); repository.store(rating); break; case 'Q': quit = true; } } while (!quit); } private char displayMenu() { listRestaurantDataInIdOrder(); InputHelper inputHelper = new InputHelper(); System.out.print("\nA. Add Restaurant"); System.out.print("\tB. Add Restaurant Review"); System.out.print("\tC. List Location Restaurant Data In Name Order"); System.out.print("\tD. List Restaurant Ratings"); System.out.print("\tQ. Quit\n"); return inputHelper.readCharacter("Enter choice", "ABCDQ"); } private void addRestaurant() { System.out.format("\033[31m%s\033[0m%n", "Add Restaurant"); System.out.format("\033[31m%s\033[0m%n", "=============="); } private void addReview() { System.out.format("\033[31m%s\033[0m%n", "Add Restaurant Review"); System.out.format("\033[31m%s\033[0m%n", "====================="); } private void listLocationRestaurantDataInNameOrder() { System.out.format("\033[31m%s\033[0m%n", "Name Order"); System.out.format("\033[31m%s\033[0m%n", "=========="); } private void listRestaurantRatings() { System.out.format("\033[31m%s\033[0m%n", "Restaurant Ratings"); System.out.format("\033[31m%s\033[0m%n", "=================="); } private void listRestaurantDataInIdOrder() { System.out.format("\033[31m%s\033[0m%n", "Restaurant Id Order"); System.out.format("\033[31m%s\033[0m%n", "==================="); } } 用于确保将正确的道具传递给子组件。有关更多上下文,请参考documentation