欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

react native初次实践踩坑记录(二)

程序员文章站 2022-03-21 17:33:01
使用rn的导航进行页面切换这个东西十分的坑,再官网中文网上,不知道为什么,基本对应不上,一通报错之后,便是一脸懵逼。yarn add react-navigationyarn add react-native-gesture-handleryarn add react-navigation-stackyarn add react-native-safe-area-contextyarn add react-native-safe-area-viewyarn add @react-native...

使用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

相关标签: react native