当前位置： 移动技术网 > 移动技术>移动开发>Android > react native初次实践踩坑记录（二）

react native初次实践踩坑记录（二）

2020年07月24日  | 移动技术网移动技术  | 我要评论

使用rn的导航进行页面切换

这个东西十分的坑，再官网中文网上，不知道为什么，基本对应不上，一通报错之后，便是一脸懵逼。

  1. yarn add react-navigation
  2. yarn add react-native-gesture-handler
  3. yarn add react-navigation-stack
  4. yarn add react-native-safe-area-context
  5. yarn add react-native-safe-area-view
  6. yarn add @react-native-community/masked-view
    别问为什么安装这么多，安装完就对了。

接下来，需要配置这些依赖

  1. 再index.js文件的顶部，添加import 'react-native-gesture-handler';
  2. 修改android目录下的build.gradle文件，找到dependencies，再内部添加implementation 'androidx.appcompat:appcompat:1.1.0-rc01'和implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
  3. 再android/app/src/main/java下，修改MainActive.java文件，添加引入包：
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
//在class内添加：
@Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

到这里基本就修改完成了，当然可以修改App.js来看看效果：

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
class DetailsScreen extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Details Screen</Text>
        </View>
      );
    }
  }

  const App = createStackNavigator(
    {
      Home: HomeScreen,
      Details: DetailsScreen,
    },
    {
        //指定那个为主屏幕
      initialRouteName: 'Details',
    }
  );

export default createAppContainer(App);

直接运行yarn android应该就能成功！

本文地址：https://blog.csdn.net/qq_41199601/article/details/107536490

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网