从零开始配置react native ヾ(◍°∇°◍)ﾉﾞ

零 · 初始配置 —修改配置后重新yarn iOS 或者 yarn android

1. 允许http（ios 9，Android 9 开始，默认只允许使用https）在该路径android/app/src/main/AndroidManifest.xml下添加

android:usesCleartextTraffic="true"

2. manifest权限检查

//runtime permission （Android 6）照相机权限
<uses-permission android:name="android.permission.CAMERA" />

3. react-native-gesture-handler // 手势组件(react-navigation必需)

//rn6+
yarn add react-native-gesture-handler

//并在android/app/src/main/java/com/tsmobile/MainActivity.java 添加相应配置
package com.swmansion.gesturehandler.react.example;

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);
+      }
+    };
+  }
}

安卓机的配置基本完成,执行yarn android后，开始iOS的配置吧

4.react-native-screens配置

使用介绍：github.com/software-ma…

配置 tsconfig.json 防止路径不准确

新建src/utils/config.ts

import {enableScreens} from 'react-native-screens';
enableScreens();

添加配置android/app/build.gradle

implementation "com.facebook.react:react-native:+"  // From node_modules
+ implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
+ implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

引用index.js

import 'utils/config';

⚠️修改配置不要忘记重新构建 yarn android

5. 删除不用的tv和test项目

删除后重新编译 yarn ios

如果是第一次执行 yarn ios,可能报错这时需要 cd ios 执行 pod install

cd .. 之后再 yarn ios

6. 到此两部手机已经可以正常使用了

壹 · 项目建议项目路径

1. 在项目下可执行mac命令创建项目结构

mkdir src 
mkdir src/components  
mkdir src/routers  
mkdir src/screens 
mkdir src/reduxState 
mkdir src/types
mkdir src/utils
cd src/reduxState
touch  actions.ts
mkdir reducers
mkdir sagas 
touch store.ts 
touch selectors.ts
cd ..

cd utils
touch navService.ts 
touch constants.ts 
touch config.ts 
touch request.ts

每个文件夹下添加package.json文件，文件内容为{"name": "routers"}，方便引用文件路径

2. 屏蔽警告⚠️src/utils/config.ts

import {enableScreens} from 'react-native-screens';
+ import {YellowBox} from 'react-native';
enableScreens();
+ YellowBox.ignoreWarnings(['Warning: componentWillMount']);

清空warning效果，根据想要清空的警告，把警告前缀拼到数组里

贰 · 权限获取

移动文件App.tsx到src/routers/App.tsx目录，并修改index.js引用路径

import App from 'routers/App';

1. 修改APP.tsx，代码如下：

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  PermissionsAndroid,
  Platform,
  Text,
} from 'react-native';

const PERMISSIONS = [
  PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
  PermissionsAndroid.PERMISSIONS.CAMERA,
];

const App = () => {
  const [permissionsGranted, setPermissionsGranted] = React.useState(false);
  //应用第一次渲染加载
  React.useEffect(() => {
    //检查权限
    function checkPermissions() {
      if (Platform.OS === 'android') {
        PermissionsAndroid.requestMultiple(PERMISSIONS).then(results => {
          const allPermissionsGranted = Object.values(
            //检查每一项为true
            results,
          ).every(result => result === 'granted');
          if (allPermissionsGranted) {
            setPermissionsGranted(true);
          } else {
            checkPermissions();
          }
        });
      } else {
        setPermissionsGranted(true);
      }
    }
    checkPermissions();
  }, []);
  if (permissionsGranted) {
    return null;
  }
  return (
    <SafeAreaView style={styles.container}>
      <Text>测试权限获取</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // alignItems: 'stretch'
  },
});

export default App;

2. APP效果如下：

使用此代码时，可能会every等方法有红色曲线警告，修改tsconfig.json中
"lib": ["es2017"]
即可。