初始化

参考：
RN官网入门
第一章 RN环境搭建以及APP生成

注意，react-native-cli已被弃用！
最终初始化方法如下：

//安装yarn，替代npm
npm install -g yarn//最新version为0.69，要求用java 11来编译android
//用java 8更方便，所以指定RN version为0.65
npx react-native init MyApp --version 0.65

按需微调

更改applicationId，位于android/app/build.gradle
更改app_name，位于android/app/src/main/res/values/strings.xml
更改AppTheme，位于android/app/src/main/res/values/styles.xml

 <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"><item name="android:statusBarColor">#000000</item></style>

如上指定statusBarColor，以便RN实现透明状态栏：

 <StatusBartranslucent={true}backgroundColor={'#0f00'}barStyle={'dark-content'}/>

可设android:windowSoftInputMode=“adjustNothing”，以免输入键盘压缩页面，位于android/app/src/main/AndroidManifest.xml

文本输入及处理

参考：
RN官网TextInput
React-Native TextInput 只支持输入数字
React-Native输入数字，每4个隔一个空格

RN的输入控件为TextInput，设其**keyboardType={‘numeric’}**以便弹出数字键盘。
而要仅限输入数字，还得要用正则处理：

     const [phoneCode, phoneCode_] = useState('');...<TextInputplaceholder='输入验证码'maxLength={phoneCodeLength}keyboardType={'numeric'}value={phoneCode}onChangeText={(text) => {//"\D"代表非数字//"/g"代表全部处理text = text.replace(/\D+/g, '');//处理后的内容又填到输入框phoneCode_(text);}}/>

通过绝对路径引用资源

参考：
下面(1)、(2)、(3)内容一样，(1)时间最早！
(1) babel-plugin-module-resolver 模块解析插件
(2) react-native 相对项目路径导入组件 ___ babel-plugin-module-resolver
(3) babel-plugin-module-resolver
(4) React Native中绝对路径配置 babel-plugin-module-resolver
(5) 理解 babel.config.js 和 babelrc

安装插件

yarn add babel-plugin-module-resolver --dev

修改babel.config.js，位于项目根目录：

module.exports = {presets: ['module:metro-react-native-babel-preset'],plugins: [['module-resolver', {root: ['.'],alias: {'src': './src','res': './res',},}],],
};

然后便可化繁为简（需要重启metro，即yarn start）

<Imagesource={require('res/login_bg.png')} //之前为'../../res/login_bg.png'resizeMode='stretch'style={{width: '100%',height: '100%',position: 'absolute',}}
/>

路由及导航

参考：
react-navigation
第二章 RN的第一个项目：导航+底部条切换+页面跳转

数据持久化

参考：
《React-Native系列》28、 RN之AsyncStorage
RN 的持久化存储（AsyncStorage）的使用

网络请求

参考：
axios官网
Timeout feature in the axios library is not working

axios设置timeout没用，补救方案：

 let source = axios.CancelToken.source();let timeout = config.timeoutsetTimeout(() => {source.cancel(`timeout of ${timeout}ms`);}, timeout);config.cancelToken = source.token;axios.get(url, config);

记第一个RN（react-native）项目相关推荐

React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
React Native 项目整合 CodePush 完全指南
作者 | 钱凯杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...
如何高效管理 React Native 项目中的图片资源
本文为 Marno 原创,转载必须保留出处! 公众号[ Marno ],关注后回复 RN 加入交流群 React Native 优秀开源项目大全:http://www.marno.cn 前言刚开始写 ...
【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小 ...
一个使用react native实现的短视频APP
黄豆仔短视频APP 一个使用react native实现的短视频APP.该项目是我没事搞着玩,用react native 写的.用了很多的库同时也修改了几个库: react-native-card-s ...
技术实践丨React Native 项目 Web 端同构
摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...
[RN] React Native 键盘管理在Android TextInput遮盖，上移等问题解决办法
[RN] React Native 键盘管理在Android TextInput遮盖,上移等问题解决办法参考文章: (1)[RN] React Native 键盘管理在Android TextI ...
React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
vscode 连接夜神模拟器运行 react native项目 (很简单的方法)
前言:我这种方式不需要过多配置,只是需要先启动Android studio ,之后再启动vsCode 准备阶段:下载夜神模拟器 1. 开启夜神服务进入到夜神安装的bin目录下,执行 nox_adb. ...

记第一个RN（react-native）项目

目录

初始化