前言：根据blibli视频教学，使用React Native最新版本0.70.6，一步步学习、整理和记录，使用编辑器是VS Code，可以网上搜索一下前端需要的插件进行安装，也需要配置一下自定义代码段，新建空白页面和注释的时候，可以使用自定义代码段。博主的普通话不是很好，稍微忍受一下，视频网址https://www.bilibili.com/video/BV1e5411L7VV/?vd_source=ad2c8fddcc94d6b77f1179fe0b5aae26

一、环境配置

参考https://reactnative.dev/docs/environment-setup

注意事项：

网络最好可以翻墙，如果不行的话，设置国内镜像，推荐使用Mac电脑。
按照教程一步步来，一步成功后，再进行下一步，出现错误，网络上进行搜索，推荐谷歌搜索。
一定要耐心，一次配置好环境的概率比较小，多尝试几次。

二、新建项目

参考https://reactnative.dev/docs/environment-setup

命令行输入

npx react-native init AwesomeProject

其中，AwesomeProject是项目名称，推荐英文，项目的目录结构会在接下来一步步进行完善。

由于React Native版本更新频繁，新建的项目版本信息如下：

三、设置字体

这步可以直接略过，跟我个人习惯有关，我喜欢好看一点的字体，不然会看着不舒服，所以先引入自定义字体--苹方，React Native默认使用手机系统字体，以下为了演示方便，字体直接下载下来是中文名称，自己重命名为英文。

1、android设置

项目名/android/app/src/main/assets/fonts（如果没有fonts文件夹的话就自己建一个），然后将下载好的字体放到fonts目录下即可

2、IOS设置

新建目录/src/main/assets/fonts，然后将下载好的字体放到fonts目录下

用Xcode打开项目，然后新建fonts文件

选择/src/assents/fonts文件夹，然后资源会出现在Build Phases-->Copy Bundle Resources中

最后，在info.plist中配置

3、最后就可以在项目中使用了

  fontFamily: 'PingFangSC-Medium'

4、新建目录/src/constant/，然后新建Styles.js 文件，常用的样式可以写在这里，便于每次引用

尤其注意：fontWeight:'500'中，500是字符串，如果直接写数字，可能会造成app闪退。

四、配置路由React-Navigation

参考https://reactnavigation.org/docs/getting-started

1、安装依赖

本人使用的是npm，你也可以使用yarn，官方参考文档一定要看到Hello React Navigation这一步，不然依赖会装不全

npm install -S @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

2、参考官方教程

在根入口文件App.js中，添加如下代码

// In App.js in a new projectimport * as React from 'react';
import {View, Text, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {styles} from './src/constant/Styles';function HomeScreen({navigation}) {return (<View style={styles.CenterContainer}><Text style={styles.Title}>Home Screen</Text><Buttontitle="Go to Details"onPress={() => navigation.navigate('Details')}/></View>);
}function DetailsScreen() {return (<View style={styles.CenterContainer}><Text style={styles.Title}>Details Screen</Text></View>);
}const Stack = createNativeStackNavigator();function App() {return (<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailsScreen} /></Stack.Navigator></NavigationContainer>);
}export default App;

然后在手机上运行如下：

3、根据视频教程，新加一个登录页面，新建以下目录/src/pages/account/login，新建index.js页面，代码如下：

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {styles} from '../../../constant/Styles';class Index extends Component {render() {<View style={styles.CenterContainer}><Text style={styles.Title}>Login</Text></View>;}
}export default Index;

然后在App.js中添加登录页面

运行效果如下

按照教程一步步来，结果登录页面是空白，仔细比对了一下，发现登录页面是用class写的，其他页面都是函数写的，于是将登陆页改成函数形式。

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {styles} from '../../../constant/Styles';const Index = () => {return (<View style={styles.CenterContainer}><Text style={styles.Title}>Login</Text></View>);
};export default Index;

手机运行效果如下

4、为方便路由管理，将路由设置整理在一个文件里。在src文件下新建一个Nav.js文件，代码如下

// In App.js in a new projectimport React from 'react';
import {View, Text, Button} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {styles} from './constant/Styles';
import Login from './pages/account/login';function HomeScreen({navigation}) {return (<View style={styles.CenterContainer}><Text style={styles.Title}>Home Screen</Text><Buttontitle="Go to Details"onPress={() => navigation.navigate('Details')}/></View>);
}function DetailsScreen() {return (<View style={styles.CenterContainer}><Text style={styles.Title}>Details Screen</Text></View>);
}const Stack = createNativeStackNavigator();function Nav() {return (<NavigationContainer><Stack.Navigator initialRouteName="Login"><Stack.Screen name="Login" component={Login} /><Stack.Screen name="Home" component={HomeScreen} /><Stack.Screen name="Details" component={DetailsScreen} /></Stack.Navigator></NavigationContainer>);
}export default Nav;

然后，在App.js引入以上文件即可，代码如下

// In App.js in a new projectimport * as React from 'react';
import {View} from 'react-native';
import Nav from './src/nav';
import {styles} from './src/constant/Styles';function App() {return (<View style={styles.Container}><Nav></Nav></View>);
}export default App;

注意：view必须设置样式flex:1才可以正常显示，否则页面全部空白，不显示。

如果需要不显示导航头，则需要加上如下属性options={{headerShown: false}}

 <Stack.Screenname="Login"options={{headerShown: false}}component={Login}/>

手机运行如下

React-Native + Mobx项目实战--探花交友APP--项目搭建相关推荐

React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好. http://reactnative.cn/docs/0.... 一.总 ...
React项目实战之租房app项目（四）长列表性能优化城市选择模块渲染列表
前言目录前言一.长列表性能优化 1.1 概述 1.2 懒渲染 1.3 可视区渲染(React-virtualized) 二.react-virtualized组件 2.1 概述 2.2 基本使用 ...
React项目实战之租房app项目（二）首页模块
前言目录前言一.首页路由处理二.轮播图 2.1 轮播图效果图 2.2 拷贝轮播图组件代码 2.3 轮播图代码详解 2.4 轮播图代码重构 2.5 解决轮播图出现的BUG 三.导航菜单 3.1 ...
React项目实战之租房app项目（十）个人中心模块登录访问控制项目打包部署上线
前言目录前言一.个人中心模块 1.1 个人中心模块效果图 1.2 个人中心模块基础布局 1.2 个人中心模块功能实现 1.2.1 判断用户是否登陆 1.2.2 退出功能二.登录访问控制 2.1 ...
SpringBoot交友APP项目实战（详细介绍+案例源码） - 7.即时通讯（基于第三方API）
陌上花开,可缓缓归矣系列文章目录 1. 项目介绍及环境配置 2. 短信验证码登录 3. 用户信息 4. MongoDB 5. 推荐好友列表/MongoDB集群/动态发布与查看 6. 圈子动态/圈子互 ...
React Native移动开发实战-4-Android平台的适配
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
黑马探花交友----1.项目搭建-注册登录-完善个人信息
学习目标: 项目的功能介绍工程搭建短信验证码阿里云OSS服务应用人脸识别完善个人信息 1.社交介绍 1.1.项目背景在线社交是互联网时代的产物,已成为互联网用户的基础需求之一.移动互联网自 ...
Android项目实战：账本APP开发
好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 Java项目实战:账本APP服务 ...
【Android项目实战 | 从零开始写app(十二)】实现app首页智慧服务热门推荐热门主题、新闻
说在前面,由于各种adapter,xml布局,bean实体类,Activity,也为了让看懂,代码基本都是"简单粗暴直接不好看",没啥okhttp和util工具类之类的封装,本篇幅 ...

React-Native + Mobx项目实战--探花交友APP--项目搭建