Android 上的 React Native 导航 0.58.X

Question

我使用的是 Native 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

从上面的 cmets 可以清楚地看出，您尚未执行 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-handlerhttps://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-gesture-handler 帖子了吗？

否则你可以运行

react-native link react-native-gesture-handler

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