Question

我想在两个屏幕之间导航。我正在尝试很多代码，但还没有成功实现。在这里，我尝试未定义的对象（RNGestureHandlerModule.State）。请帮助我是本机反应的新手，请检查任何帮助将不胜感激。如果他们有任何适当的指导，请帮助让我知道

我的App.Js看起来像

 import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    import AppNavigator from './AppNavigator';


    type Props = {};
    export default class App extends Component<Props> {
      render() {
        return (

         <AppNavigator/>


        );
      }
    }

My appnavigation look like

    import { createStackNavigator } from 'react-navigation';
    import Home from './Home';
    import Friends from './Friends';


        const AppNavigator = createStackNavigator({
            Home: { screen: Home },
           Friends: { screen: Friends},
        });

        export default AppNavigator;

我的Friend.js看起来像

import React, {Component} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';



type Props = {};
export default class Friends extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Button
           title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
My HOme.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';



type Props = {};
export default class Home extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Button
          title="Back to home"
          onPress={() =>
            this.props.navigation.navigate('Home')
          }
        />

      </View>
    );
  }
}

Answer 1

它未链接到导航库。该问题与“ RNGestureHandlerModule”相关。我假设您正在使用另一个库，可能是“ react-native-gesture-handler”。尝试使用react-native链接删除并链接它。

找到了与此相关的帖子here

Answer 2

您正在使用最新的reactnavigation库。它需要安装react-native-gesture-handler。但是，如果您使用的是Expo，则由于该库已包含在sdk中，因此无需安装。

在安装react-native-gesture-handler库之后，运行react-native link命令以链接所有本机依赖项。

在ReactNative中导航

2 个答案: