React Native navigation 0.58.X on Android

Question

我正在使用本机v0.58.3，但我似乎无法让导航工作。

我似乎无法弄清楚为什么它不起作用，并且在调试和查看文档时找不到错误。我得到的错误是：

null 不是对象(评估 'rnGesturehandlerModule.state'(

运行此代码时：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React, {Component} from 'react';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {Platform, StyleSheet, Text, View, Image, ScrollView, Navigator, Button, TouchableOpacity, borderRadius} from 'react-native';
import {createStackNavigator, createAppNavigator} from 'react-navigation';
import TimeLine from './Screens/TimeLine';
import Home from './Screens/Home';
const RootStack = createStackNavigator(
{
  Home: { screen: Home },
  TimeLine: { screen: TimeLine },
},
{
    initialRouteName: 'Home',
}
);
type Props = {};
export default class App extends Component<Props> {
  render() {
    return <RootStack />;
  }
}

import React, {Component} from 'react';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {Platform, StyleSheet, Text, View, Image, ScrollView, Navigator, Button, TouchableOpacity, borderRadius} from 'react-native';
import {createStackNavigator, createAppNavigator, StackNavigator} from 'react-navigation';
const styles = StyleSheet.create({
  container: {flex: 1},
  Button: {
  backgroundColor: '#992632',
  marginTop: hp('6.665%'),
  marginBottom: hp('6,665%'),
  marginRight: wp('4%'),
  marginLeft: wp('4%'),
  height: hp('20%'),
  borderRadius: 150,
  }
});
export class Home extends Component {
  render() {
    return (
      <View style={{
            backgroundColor: '#0a6ca3',
            height: hp('100%'),
          }}>
      <TouchableOpacity
          onPress={() => this.props.navigation.navigate('TimeLine')}
 
          style={styles.Button}>
              <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Tidslinje </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={function(){
            console.log('Rasmus')
          }}
          style={styles.Button}>
            <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Diskussion </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={function(){
            console.log('Rasmus')
          }}
 
          style={styles.Button}> 
          <Text style = {{fontSize: 75, color: 'white', textAlign: 'center', marginTop: hp('4.5%')}}> Demokrati </Text>
        </TouchableOpacity>
      </View>
    )
  }
}
export default Home;

Answer 1

从上面的评论中可以清楚地看出您还没有执行Android设置的最后阶段。

在项目的根目录中，有一个名为 android 的文件夹。您需要在该文件夹中查找名为 MainActivity.java 的文件，它可能在android/app/src/main/java/com/your_app_name/

在该文件中，您需要进行一些更改。所有旁边有加号的行都需要添加到文件中(显然您不包括+(

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "Example";
  }
+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

您应该查看设置react-native-gesture-handler https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html 的官方文档

react-navigation还详细解释了这些步骤 https://reactnavigation.org/docs/en/getting-started.html

Answer 2

这

听起来像是一个链接问题。您是否查看了此反应本机手势处理程序帖子？

否则你可以跑

react-native link react-native-gesture-handler

并重新安装应用程序(即 yarn run-ios (。