react-native使用总结

最新推荐文章于 2023-05-18 12:55:08 发布

My_Bells

最新推荐文章于 2023-05-18 12:55:08 发布

阅读量477

点赞数

分类专栏： React 文章标签： react native

本文链接：https://blog.csdn.net/qwe435541908/article/details/105660059

版权

React 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1. 与web端区别

css使用驼峰式写法。而且写法和web端有些差异，比如移动端padding属性不能四个方向一起写，只能定义一个方向paddingLeft、或者水平方向paddingHorizontal、垂直方向paddingVertical。
移动端只能使用flex弹性布局，和web端水平垂直方向刚好相反，所以水平方向使用alignItems属性。
单位不能是px。只能是pt，默认不写单位只写数字。

2. IOS和Android

移动端需要兼容IOS和Android就要使用Mac电脑。ndroid一般模拟器使用Android Studio自带的，IOS需要使用XCode自带的模拟器。window系统只能开发Android,不能开发IOS。

Android不能直接使用：

new Date('2019-12-12 12:12:12')//Android返回NaN，ios正常

可以改成：

new Date(Date.parse('2019-12-12 12:12:12')));
或者：
const jsCoreDateCreator = (dateString) => { 
  // dateString *HAS* to be in this format "YYYY-MM-DD HH:MM:SS"  
  let dateParam = dateString.split(/[\s-:]/)  
  dateParam[1] = (parseInt(dateParam[1], 10) - 1).toString()  
  return new Date(...dateParam)  
}
jsCoreDateCreator('2019-12-12 12:12:12');

3. 启动项目

首先在项目中下载项目依赖包，npm install。

如果要在android中启动项目，直接启动的话可能会报一些错误。最好首先将android文件夹中build.gradle文件在Android Studio中打开，这样就可以在Android Studio中自动检测一些问题自动修复，比如sdk不匹配，并安装一些依赖。完成后直接在你的编辑器中（比如vscode）执行npm run start,npm run android启动项目。如果你能搞定上面的错误也可以不在Android Studio中打开android项目。

如果使用ios启动项目，首先要保证mac安装了xcode编辑器、Homebrew、cocoapods。然后在项目中cd到ios文件夹下，执行pod install安装ios依赖。最后执行npm run start,npm run ios启动项目。

查看连接的设备

adb连接地址修改：adb connect localhost:22471

adb重启：
adb kill-server
adb start-server

查看连接设备：
adb devices

4. 调试

vscode可以安装插件react native tools，直接就可以在编辑器中调试。

直接使用npm run android/ios可以打开模拟器中的调试功能，这样就可以在浏览器控制台调试。

同时启动ios和android

先打开终端执行npm run start启动服务。
启动ios:npm run ios。
启动android: npm run android

切换需要reload项目。

5. 行内样式和外部样式合并

下面4个View共用styles.rect_view样式，但是又要有各自的样式，代码实现如下：

<View style={{...styles.rect_view, backgroundColor: 'red'}} />
<View style={{...styles.rect_view, backgroundColor: 'blue'}} />
<View style={[styles.rect_view, {backgroundColor: '#F0F2F5',}]} />
const styles = StyleSheet.create({
  rect_view: {
    width: 50,
    height: 50,
    backgroundColor: '#C4C4C4',
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center',
  }
});

6. react-native不允许同时显示多个Modal

一个Modal关闭后才能显示另一个Modal，不能同时显示多个Modal，不能一个Modal覆盖另一个Modal。只能用其他方法实现。比如使用react-navigation中的创建一个导航，用导航模拟Modal。

7. ScrollView里面超出滑动问题

ScrollView里面有的地方触摸上下滑动不了，给外面套个TouchableOpacity标签就可以了。

<ScrollView>
  {/* 加上TouchableOpacity否则滑动不了 */}
  <TouchableOpacity activeOpacity={1} >
    {this.props.children}
  </TouchableOpacity>
</ScrollView>

8. Android打包

生成一个签名密钥

你可以用keytool命令生成一个私有密钥。在 Windows 上keytool命令放在 JDK 的 bin 目录中（比如C:\Program Files\Java\jdkx.x.x_x\bin），你可能需要在命令行中先进入那个目录才能执行此命令。

$ keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

设置 gradle 变量

把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties（全局配置，对所有项目有效）或是项目目录/android/gradle.properties（项目配置，只对所在项目有效）。如果没有gradle.properties文件你就自己创建一个，添加如下的代码（注意把其中的****替换为相应密码）
注意：~符号表示用户目录，比如 windows 上可能是C:\Users\用户名，而 mac 上可能是/Users/用户名。

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

上面的这些会作为 gradle 的变量，在后面的步骤中可以用来给应用签名。

把签名配置加入到项目的 gradle 配置中

编辑你项目目录下的android/app/build.gradle，添加如下的签名配置：

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

生成发行 APK 包

只需在终端中运行以下命令：

$ cd android
$ ./gradlew assembleRelease

生成的 APK 文件位于android/app/build/outputs/apk/release/app-release.apk，它已经可以用来发布了。

如果报错：按照以下步骤清除缓存再试一遍：
1- close the project
2- close android studio
3- delete the .idea directory
4- delete all .iml files
5- open android studio and import the project

可以直接发布到蒲公英或者fir.im平台上，然后使用地址下载app。支持Android和iOS。

移除不需要的权限

一般app都不需要读写SD卡权限，这些权限申请会在用户安装或运行时弹出提示打断用户甚至使用户感到反感，所以我们应该尽量移除不必要的权限申请，以改进用户体验和提升用户好感。
1.打开1android/app/src/main/AndroidManifest.xml1文件。添加以下带加号的代码

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.myappid"
+   xmlns:tools="http://schemas.android.com/tools"
    >

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
+   <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
+   <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+   <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
    </application>

</manifest>

自动修改版本号，根据package.json中的version来配置

修改 android/app/build.gradle文件的versionName

import groovy.json.JsonSlurper

//获取配置文件的版本信息
def getAppVersion() {
    def inputFile = new File("../package.json")
    def packageJson = new JsonSlurper().parseText(inputFile.text)
    return packageJson["version"]
}

def appVersion = getAppVersion()

android {
    ...

    defaultConfig {
        versionName appVersion
    }
}

8. IOS打包

第一步：导出js bundle包和图片资源

1.在ios文件夹下创建bundle文件夹
2.通过 react-native bundle 命令可以打包离线资源。为了日后把打包方便，我们把打包指令填在下package.json下

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle"
  },

通过上述命令，我们可以将JS部分的代码和图片资源等打包导出到ios目录下的bundle目录下

第二步：将js包包和图片资源导入到iOS项目中

在Xcode中添加资源到项目中，必须使用Create folder references的方式(也就是文件夹的方式)添加bundle文件
夹
在这里插入图片描述

第三步：修改加载文件 AppDelegate.m

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"bundle/index" withExtension:@"jsbundle"];
#endif
}

My_Bells

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react-native使用总结

1. 行内样式和外部样式合并下面4个View共用styles.rect_view样式，但是又要有各自的样式，代码实现如下：<View style={{...styles.rect_view, backgroundColor: 'red'}} /><View style={{...styles.rect_view, backgroundColor: 'blue'}} /&gt...
复制链接

扫一扫