开发 React Native APP —— 从改造官方Demo开始(2)

1,852 阅读12分钟

还是摘自L小庸的文章,加入了一点个人的实践和理解

经过第一部分开发 React Native APP —— 从改造官方 Demo 开始(1)介绍,App 框架基本构建完成,这部分主要关注 UI/交互、App 发布前的准备工作及如何发布,具体内容包括:

  • 在使用 react navigation 的前提下,iOS 实现单个页面从下往上(modal)的进入动画
  • 尺寸自适应
  • 设置启动页,更换桌面图标、app 展示名称、appID
  • 打包发布

一 扩展 react navigation

这部分在android下无效…… ,个人是win,所以后面没有展示效果图,有mac的可以尝试下效果

 官方标注:modal - Make the screens slide in from the bottom which is a common iOS pattern. Only works on iOS, has no effect on Android.

这里的扩展指的是实现可单独配置页面的进入方式react navigation 默认只支持全局配置,要么 card,要么 modal,配置后所有页面进入动画相同)。

     实现上述效果需要做两方面修改:createStackNavigator API(在 route.js 中使用)和进入某个页面是的调用方式。

1.1 修改 StackNavigator API

     修改后如果使页面默认状态为 card,只需要输入对应页面即可,比如 ..navigate('ScreenSome1');如果要使某个页面进入方式为 modal 只需要在路径上加上 Modal 比如:..navigate('ScreenSome2Modal')
需要注意的是如果页面进入方式为 modal,需要自定义 header,因为默认 header 样式失效,都叠在一块了。(还没有实际遇到,先mark着)
关于card和modal,个人还并不是很理解,后续理解了再补上

1.2 页面中调用

    首先我们新建页面 ScreenSome2,接下来就让它以 modal 的形式进入(从屏幕下面进入),作为对比 ScreenSome1card 的形式进入(默认进入方式,从屏幕右侧进入)。

    因为以 modal 形式进入的页面需要自定义 header,一般只是一个关闭按钮,以 ScreenSome2 为例:

/**
 * ScreenSome2/view.js
 * 自定义 header(关闭按钮)
 */
import React from 'react';
import { TouchableHighlight,Text,View } from 'react-native'
import pxToDp from '../../config/pxToDp';

<View>
  <TouchableHighlight
    onPress={() => self.navigation.goBack()}
    underlayColor="transparent"
    style={{
      display: "flex",
      justifyContent: "center",
      marginTop: pxToDp(30),
      width: pxToDp(150),
      height: pxToDp(90),
      backgroundColor: "yellow"
    }}
  >
    <Text style={{ marginLeft: pxToDp(24) }}>关闭</Text>
  </TouchableHighlight>

  <Text style={{ fontSize: pxToDp(36) }}>some2,以 modal 的形式进入</Text>
</View>

然后就是更改进入 ScreenSome2 代码:

/**
 * ScreenSome2/view.js
 * 自定义 header(关闭按钮)
 */
import React from 'react';
import { TouchableHighlight,Text,View } from 'react-native'
import pxToDp from '../../config/pxToDp';

export default self => (
  <View>
    <TouchableHighlight
      onPress={() => self.navigation.goBack()}
      underlayColor="transparent"
      style={{
        display: "flex",
        justifyContent: "center",
        marginTop: pxToDp(30),
        width: pxToDp(150),
        height: pxToDp(90),
        backgroundColor: "yellow"
      }}
    >
      <Text style={{ marginLeft: pxToDp(24) }}>关闭</Text>
    </TouchableHighlight>

    <Text style={{ fontSize: pxToDp(36) }}>some2,以 modal 的形式进入</Text>
  </View>

);

为了看起来稍微好看点,加了一点样式,不加也可以。style.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  buttonContainer: {
    margin: 20
  },
});

别忘了在route里配置新的路由,完整代码如下:

// 引入依赖
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation'

// 引入页面组件
import ScreenBottomTab from '../screens/ScreenBottomTab';
import ScreenHome from '../screens/ScreenHome';
import ScreenSome1 from '../screens/ScreenSome1';
import ScreenSome2 from '../screens/ScreenSome2';
import ScreenTab1 from '../screens/ScreenTab1';
import ScreenTab2 from '../screens/ScreenTab2';
import ScreenTab3 from '../screens/ScreenTab3';

/**
 * 自定义 StackNavigator,可以选择 screen 进入方式
 * 默认状态为 card,只需要输入对应页面,比如 ..navigate('ScreenSome1')
 * 如果要使某个页面进入方式为 modal 只需要在路径上加上 Modal
 * 比如:..navigate('ScreenSome2Modal')
 */
const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = createStackNavigator(routeConfigs, navigatorConfig);
  const modalRouteConfig = {};
  const routeNames = Object.keys(routeConfigs);

  for (let i = 0; i < routeNames.length; i++) {
    modalRouteConfig[`${routeNames[i]}Modal`] = routeConfigs[routeNames[i]];
  }

  const ModalStackNavigator = createStackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig,
    },
    {
      // 如果页面进入方式为 modal,需要自定义 header(默认 header 样式失效,都叠在一块了)
      mode: 'modal',
      headerMode: 'none',
    },
  );

  return ModalStackNavigator;
};


// 配置路由
const AppNavigator = StackModalNavigator({
  ScreenBottomTab: ScreenBottomTab,
  //下面几个配置的是测试Navigator不同使用场景用,只需要tab的话,只要ScreenBottomTab: ScreenBottomTab即可
  ScreenHome: ScreenHome, 
  ScreenSome1: ScreenSome1,
  ScreenSome2: ScreenSome2,
  ScreenTab1: ScreenTab1,
  ScreenTab2: ScreenTab2,
  ScreenTab3: ScreenTab3,
});
const App = createAppContainer(AppNavigator)
export default App

this.props.navigation有很多方法,demo中(ScreenHome,ScreenSome1)只用到.navigate,.push,.goBack,具体可参考https://reactnavigation.org/docs/zh-Hans/navigation-prop.html

二 自适应

自适应主要包括两方面:尺寸根据屏幕大小自适应,包括 fontSizewidth 等;图片分辨率根据屏幕分辨率自适应,也就常说的二倍图、三倍图等。

2.1 尺寸自适应

copy自@L小庸的代码片段

尺寸自适应的原理是通过获取手机屏幕的宽度,尺寸做相应比例的调整,为此封装了一个工具函数,放在了 config/pxToDp.js 中。

  • config/pxToDp.js 尺寸转换的工具函数

1)编写自适应尺寸工具函数

    因为所有涉及尺寸的数据都要转换(fontSizewidth等),所以对转换后的数据要做处理,保证:1.大于等于 1 的数字向上取整;2.小于 1 的数字,如果是 ios 平台统一设为 0.5;如果是安卓平台统一设为 1(因为安卓平台分辨率千差万别万别,低分辨率的屏幕显示 0.5 的尺寸会有锯齿状)。工具函数完整代码如下:

/**
 * 自适应布局
 * @param uiElementPx: ui给的原始尺寸
 */
import { Dimensions, Platform } from 'react-native';

// app 只有竖屏模式,所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width;

// UI 默认给图是 750
const uiWidthPx = 750;

function pxToDp(uiElementPx) {
  const transferNumb = uiElementPx * deviceWidthDp / uiWidthPx;

  if (transferNumb >= 1) {
    // 避免出现循环小数
    return Math.ceil(transferNumb);
  } else if (Platform.OS === 'android') {
    // 如果是安卓,最小为1,避免边框出现锯齿
    return 1;
  }
  return 0.5;
}

export default pxToDp;

实际上,通过 Dimensions.get('window').width 获取的屏幕宽度和自己想象的可能有出入,比如,iphone7 屏幕 4.7'',获取到的宽度是 375,华为 P9 是 5.2',但获取到的宽度却是是 360!有点坑,这个工具函数还有待优化。个人还没有遇到这么多场景,也还没有更好的方案,如果踩坑,后续更新。

2.3 Flex布局

自己折腾了半天flex布局,相比web的flex布局,还是有很多区别,需要的可以参考练习练习~也可以自己找难度更高的布局进行练习,参考代码https://github.com/elainema/ELAINE/blob/master/RN/AwesomeProject/src/screens/demos/FlexTest.js


2.3 图片分辨率自适应

手机分辨率越来越多,尤其安卓,React Native 可以根据不同分辨率加载不同尺寸的图片,只需在图片命名上面加以区分。

  • 提供不同分辨率的图片

比如我们有张图片叫 test.png,尺寸为 40 x 40(单位像素),为了做到自适应屏幕分辨率,我们还需要提供它的 2 倍图,3 倍图,这样,一张图片就对应 3 个尺寸,如下:

# 一张图片提供 3个尺寸

test.png # 尺寸 40 x 40
test@2x.png # 尺寸 80 x 80
test@3x.png # 尺寸 120 x 120
name@nx是 n (n > 1) 倍图命名规范,React Native 也是根据命名判断图片尺寸的。
  • 使用

在引用图片的时候直接使用 不加倍率后缀的图片名,比如,直接使用 test.png,如下:

/**
 * ScreenTab3/view.js
 */

<Image
  source={require("../../assets/images/test.png")}
  style={{ height: pxToDp(80), width: pxToDp(80) }}
/>

三 修改桌面图标、App 展示名称,设置启动页

修改桌面图标、App 展示名称相对简单,设置启动页稍微麻烦。

IOS的设置并没有mac去尝试,可参考@L小庸的https://juejin.cn/post/6844903567849947143尝试,
踩坑:开发要连真机调试,尤其是涉及原生功能的部分,切记。

3.1 设置桌面图标

因为 App 图标对应多个尺寸,手动改写太麻烦,这个网站可以自动生成 MakeAppIcon

并不是所有尺寸的图片都需要,见下文。

  • 安卓

安卓的 app 图标相对简单,只需要设置桌面图标。设置位置在 yourApp/android/app/src/main/res/ 目录下,


这个目录默认有5个文件夹,里面各对应放置了一种尺寸的桌面图标图片,图片尺寸不同,但名称相同,统一为 ic_launcher.png,具体如下所示:

文件夹名称 含义 文件夹内部图片尺寸 文件夹内部图片名称
mipmap-ldpi Low Density Screen 36x36 ic_launcher.png
mipmap-mdpi Medium Density Screen 48x48 ic_launcher.png
mipmap-hdpi High Density Screen 72x72 ic_launcher.png
mipmap-xhdpi Extra-high density screen 96x96 ic_launcher.png
mipmap-xxhdpi xx-high density screen 144x144 ic_launcher.png
mipmap-xxxhdpi xxx-high density screen 192x192 ic_launcher.png

如果你使用了 MakeAppIcon 的服务,直接将对应文件夹全部放入 res/ 目录下就好,不然就手动替换图标。

可以根据实际需求删除不必要的文件,比如,120 DPI 的屏幕很少了,那么这个文件夹就可以不要


3.2 修改 App 展示名称

IOS的参考@L小庸的https://juejin.cn/post/6844903567849947143尝试
  • 安卓

安卓修改 App 展示名称在这个文件中 yourApp/android/app/src/main/res/values/strings.xml

strings.xml 这个文件很简单,全部内容如下:

<resources>
    <string name="app_name">你的app名称</string>
</resources>
复制代码

替换 你的app名称 为你想要的名字就好。

安卓的话,还要修改默认包名(applicationId),如果不修改,如果系统监测到当前应用的 applicationId 和已安装的某个应用相同而签名不同,会报错:“签名不一致 该应用可能已被恶意篡改”。

在这个文件中修改包名: yourApp/android/app/build.gradle

// ...

defaultConfig {
    applicationId "com.yourAppId"
    // ...
}

// ...

3.3 设置启动页

这里使用了第三方插件react-native-splash-screen,官网教程已经很详细,这里做简要介绍。

  • 项目中安装依赖

1)下载依赖

yarn add react-native-splash-screen

2)添加到项目中

react-native link react-native-splash-screen

3)在 React Native 配置

这里指的是设置启动页什么时候消失,下面的代码是首页加载完 5s 后启动页消失。

export default class ScreenHome extends Component {
  // ...other code
  componentDidMount() {
    // 隐藏启动页,如果不设置消失时间,在组件加载完启动页自动隐藏
    setTimeout(() => {
      SplashScreen.hide();
    }, 5000);
  }
  // ...other code
}

  • iOS 设置参考@L小庸的https://juejin.cn/post/6844903567849947143尝试
  • 安卓配置

      1)更新 MainActivity.java(yourApp/android/app/src/main/java/com/yourApp/MainActivity.java):            

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

  2)新建 launch_screen.xml                                          

app/src/main/res/layout 中创建 launch_screen.xml(如果没有 layout 目录,新建),内容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

3)准备不同尺寸的启动页图片并放到项目中

安卓是通过文件夹路径寻找启动页面的,所以,多张尺寸的启动页名称相同,都为 launch_screen.png,但要放在不同文件夹中,文件夹放置目录为 yourApp/android/app/src/main/res/,名称及对应放置的图片尺寸如下:

文件夹名称 含义 文件夹内部图片尺寸 文件夹内部图片名称
drawable-ldpi Low Density Screen 240x320 launch_screen.png
drawable-mdpi Medium Density Screen 320x480 launch_screen.png
drawable-hdpi High Density Screen 480x800 launch_screen.png
drawable-xhdpi Extra-high density screen 720x1280 launch_screen.png
drawable-xxhdpi xx-high density screen 960x1600 launch_screen.png
drawable-xxxhdpi xxx-high density screen 1280x1920 launch_screen.png

建议直接从 480x800 起步放置 4 张图片就好。
文件必须是 png 格式的图片,开始随便找了一张图片,结果打包各种报错,命名需对应尺寸

4)优化启动页出现前的短暂白屏(copy,踩坑填坑)

到这里,启动页功能已经 ok,但如果仔细看,可以看到启动页出现前会有短暂白屏,此时可通过更改android/app/src/main/res/values/styles.xml 解决:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>
这种方案实际没有根本解决问题:会发现这样设置以后点击图片不能立即弹出应用,而有短暂的等待时间,待填坑。

5)解决安卓 6.0,7.0 安装配置完成后出现闪退,参考下面设置:(copy,踩坑填坑)

android/app/src/main/res/values 下面新建 colors.xml 文件,内容如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- this is referenced by react-native-splash-screen and will throw an error if not defined.  its value does nothing, just here to avoid a runtime error. -->
    <color name="primary_dark">#000000</color>
</resources>
因为 react-native-splash-screen 需要一个名为 primary_dark 的颜色值作为状态栏的颜色。

3.4 最终效果图

设置完桌面图标、修改 APP 展示名称及设置启动页之后的效果图如下:


demo里后续添加了自己练习的部分,所以效果图和代码稍有差别,需要的只用care文章里的步骤就好

四 打包发布

4.1 安卓打包发布

  • 生成签名
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 
  • 设置 gradle 变量

1)首先将签名文件 my-release-key.keystore 放在目录 yourApp/android/app/

2)修改文件 yourApp/android/gradle.properties 添加下面代码 (替换 ***** 为正确的 keystore 密码、别名、和 key 密码):

注意这里的MYAPP_RELEASE_STORE_PASSWORD和MYAPP_RELEASE_KEY_PASSWORD一定要和生成签名时的密码保持一致
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

3)添加签名信息到 app 的 gradle 配置中

编辑文件 yourApp/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
        }
    }
}

  • 打包

在终端输入下面命令

cd android && ./gradlew assembleRelease

等待构建完成,便可以在 yourApp/android/app/build/outputs/apk/release/app-release.apk 中找到编译后的发布版本。

NOTE:如果遇到这个错误:Execution failed for task ':app:processReleaseResources',做下述修改:,个人没有遇到,mark先~

yourApp/android/gradle.properties 文件最后添加下面代码:

classpath 'com.android.tools.build:gradle:3.0.0'
distributionUrl=https://services.gradle.org/distributions/gradle-4.1-all.zip
android.enableAapt2=false
NOTE:如果遇到Execution failed for task ':app:bundleReleaseJsAndAssets'.不幸的遇到了这个错…………

删除 android/app/build and android/build folders and run react-native run-android again

五 小结

到目前为止,从改造官方 demo 开始,一个比较完整的 React Native App 完成了,在此基础上可以不断扩展完善。

后面如果有有空会在各部分加入更多详细的demo和使用场景,以及踩坑分享。

当然,从生产角度来说,这个 demo 的完成度不高,比如,很多样式还是最原始的状态、比如 WebView(App 中嵌入 H5)、下拉刷新等也没有涉及。其中 WebView、下拉刷新等常用功能会逐步集成到这个 demo 中,但样式并不打算做过多优化,因为从使用角度来讲,样式的完成度越高意味着可定制性越差,并且,那样也会导致代码的可读性变差。希望这个 demo 可以成为完整、普适但不臃肿的脚手架。