Реагируйте на встроенную навигацию 0.58.X на Android - PullRequest
Новая
       8

Реагируйте на встроенную навигацию 0.58.X на Android

0 голосов
/ 05 февраля 2019

Я использую 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;

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Из приведенных выше комментариев ясно, что вы не выполнили последний этап настройки для 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

0 голосов
/ 05 февраля 2019

Звучит как проблема со ссылкой.Вы проверили этот реакция-родной-жест-обработчик пост?

В противном случае вы можете запустить 

react-native link react-native-gesture-handler

и переустановить приложение (т.е. yarn run-ios).

...