1.RN:React-native

RN 主推用一种语言开发不同的端，而不是一套代码。

2. 移动端一些方案

h5: 手机浏览器直接加载，是用浏览器渲染渲染的。
hybrid方案

界面层：将html + css + Js 打包
渲染层：webview 嵌入的浏览器,用于渲染web元素（React会进行createElement）
底层：Native（ios/andriod）
JSBridge: 将js和原生结合起来

RN

界面：React 、router、UI、fetch
Jscore: 用来解析执行js
js bridge: shadow tree、Json、native MOdule
Native: ios /andriod

h5 和RN 的区别

1.H5内嵌了浏览器，书写的div标签，最终通过的是用浏览器进行渲染的。

2.RN使用的一种类似React的jsx标签，通过渲染引擎进行解析、转换，最终生成了面向原生开发的渲染代码，进行渲染。

RN的新架构

界面：React 、router、UI、fetch
JSI: js的代码，直接通过c++,直接转换过去
UI Manager 的新架构； turbo modules负责和原声端进行交互； shadow thread yoga引擎纪进行渲染
Native: ios /andriod

3.环境搭建

以macOs系统为例,下面都是必须的

macOs系统 12+
node > 14 版本
npx >= 8 版本
Xcode
Watchman
CocoaPods

步骤1: 打开翻墙工具

重要的事情说三遍，必须打开，否则各种失败，都不知道原因。

步骤2: 安装homebrew

参考安装教程brew.idayer.com/guide/start…

步骤3: 安装依赖

brew install node

brew install watchman

brew install cocoapods

步骤4： 安装Xcode

appStore 下载就可以，需要appId登陆就可以下载了，免费软件。

请保证以上都安装成功了

步骤5: 创建项目

不需要全局安装react-native-cli，有的话，也请卸载掉。最好源选择npm.

选择一个文件夹，通过命令行执行： npx react-native init demo

出现如下的图，表明正在下载项目，这个过程比较慢，且容易出错，根据出错信息提示修改错误。

当出现如下图的时候表示成功了：

步骤6:执行项目

先启动ios模拟器环境 cd /demo && npx react-native run-ios

模拟器界面就会出现

将react-native 项目运行在ios模拟器环境中有两种方式，手动选择： demo/ios/demo.xcworkspace 双击就能打开在Xcode中运行

命令执行：xed -b ios（我选择的方式）

以下图表示成功

此时会发现，模拟器编译并展示了react-native项目，如下图：

打开熟悉的编译器，并修改App.js，保存就能看到更新了。这个环境是花了一天时间搞定的，各种报错，慢慢解决总能搞定的。

4. 组件

4.1 基础组件

View 搭建界面最基础的组件

View 是一个支持支持任意多个类型的子视图的容器。

const App: () => Node = () => {
return (
  <SafeAreaView>
    <View style={{marginTop: 10, borderWidth: 1, borderStyle: 'dashed'}}>
      <Text>时代峰峻</Text>
    </View>
  </SafeAreaView>
);
};

Text 展示文本内容的组件文本必须放到Text中

   <Text>时代峰峻</Text>

Image

     {/* 加载本地图片 */}
      <Image
        source={require('./images/1.png')}
        style={{width: 40, height: 40}}
      />
      {/* 加载远程图片 */}
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

TextInput 表单组件

   <TextInput style={{height: 40, borderWidth: 1}} />

ScrollView 滚动容器

特点：一次渲染全部的内容，即使在非可视区，建议用FlatList

     <ScrollView style={{height: 80, marginHorizontal: 20}}>
      <Text style={styles.sectionTitle}>
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了 啊是风景了
        啊是风景了 啊是风景了 啊是风景了 啊是风景了
      </Text>
    </ScrollView>

StyleSheet 提供抽象的样式类方法

  const styles = StyleSheet.create({
   sectionContainer: {
     marginTop: 32,
     paddingHorizontal: 24,
   },
   sectionTitle: {
     fontSize: 24,
     fontWeight: '600',
   },
   sectionDescription: {
     marginTop: 8,
     fontSize: 18,
     fontWeight: '400',
   },
   highlight: {
     fontWeight: '700',
   },
 });

4.2 交互

Button 、Picker 、slider、Switch 等组件，可以用一些第三方库react-native-community/picker

5.调试

调试：command + D

reload 重新加载 debugger:可以打开浏览器就行调试

6.项目开发

6.1 依赖安装：

   "@react-native-community/masked-view": "^0.1.11",
   "@react-navigation/bottom-tabs": "^6.3.1",
   "@react-navigation/native": "^6.0.10",
   "@react-navigation/stack": "^6.2.1",
   "react": "18.0.0",
   "react-native": "0.69.1",
   "react-native-gesture-handler": "^2.5.0",
   "react-native-gesture-helper": "^1.2.1",
   "react-native-reanimated": "^2.8.0",
   "react-native-safe-area-context": "^4.3.1",
   "react-native-screens": "^3.13.1",
   "react-native-swiper": "^1.6.0",
   "react-native-vector-icons": "^9.2.0"

6.2 配置路由

import React, {useEffect} from 'react';
import {View, Text, SafeAreaView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons';
import {createStackNavigator} from '@react-navigation/stack';

const TestDemo = () => {
 return (
   <View>
     <Text>对方身份</Text>
   </View>
 );
};

const List = () => {
 return (
   <View>
     <Text>这是列表</Text>
   </View>
 );
};

const BottomTab = () => {
 const Tab = createBottomTabNavigator(); // 创建导航

 return (
   <Tab.Navigator initialRouteName="首页">
     <Tab.Screen name="首页" component={TestDemo} />
     <Tab.Screen name="列表" component={List} />
   </Tab.Navigator>
 );
};

const Detail = () => {
 return (
   <View>
     <Text>safsa</Text>
   </View>
 );
};

const Stack = createStackNavigator(); //路由栈

// RN 里面只有一个展示区域，下面是有两个场景（页面tab(又包含好几个子页面),页面li）

const App = () => {
 return (
   <NavigationContainer>
     <Stack.Navigator initialRouteName="tab">
       <Stack.Screen name="tab" component={BottomTab} />
       <Stack.Screen
         name="li"
         component={Detail}
         options={{
           headerTitle: '详情页',
           headerBackTitle: '返回',
         }}
       />
     </Stack.Navigator>
   </NavigationContainer>
 );
};

export default App;

6.3 解决导航字体图标

修改如下代码，发现字体图标出不来。

    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({color, size}) => {
          let iconName;
          switch (route.name) {
            case '首页':
              iconName = 'home';
              break;
            case '列表':
              iconName = 'list';
              break;
          }
          return (
            <Text>
              <Ionicons name={iconName} color={color} size={size} />
            </Text>
          );
        },
        tabBarActiveTintColor: '#07aeec',
      })}>
      <Tab.Screen name="首页" component={TestDemo} />
      <Tab.Screen name="列表" component={List} />
    </Tab.Navigator>

解决方法：

将node_modules/react-native-vector-icons/Fonts 复制出来

2.将复制出来的文件放到ios下面 /ios/fonts

3.复制一下内容添加到到 info.plist文件里面

info.plist 有两处 1. /ios/demo/Info.plist 2.demoTests/Info.plist（可能是不需要的，这里都配置了）

重启项目，如果不行的话。

重新执行 yarn

执行 npx pod-install ios

<key>UIAppFonts</key>
<array>
 <string>AntDesign.ttf</string>
 <string>Entypo.ttf</string>
 <string>EvilIcons.ttf</string>
 <string>Feather.ttf</string>
 <string>FontAwesome.ttf</string>
 <string>FontAwesome5_Brands.ttf</string>
 <string>FontAwesome5_Regular.ttf</string>
 <string>FontAwesome5_Solid.ttf</string>
 <string>Foundation.ttf</string>
 <string>Ionicons.ttf</string>
 <string>MaterialIcons.ttf</string>
 <string>MaterialCommunityIcons.ttf</string>
 <string>SimpleLineIcons.ttf</string>
 <string>Octicons.ttf</string>
 <string>Zocial.ttf</string>
 <string>Fontisto.ttf</string>
</array>

6.4 路由跳转 navigation.navigate

const TestDemo = props => {
console.log('----->', props);
return (
  <View>
    <Text
      onPress={() => {
        props.navigation.navigate('Detail');
      }}>
      点击跳转到详情页
    </Text>
  </View>
);
};

6.5 配置logo

    // logo 组件
    const Logo = () => {
     return (
       <View
         style={{
           display: 'flex',
           justifyContent: 'center',
           alignContent: 'center',
           flexDirection: 'row',
         }}>
         <Image
           source={require('../images/1.png')}
           style={{width: 20, height: 20}}
         />
         <Text>蚂蚁拌大象的RN</Text>
       </View>
     );
   };
   // 路由使用
   <Stack.Screen
     name="tab"
     component={BottomTab}
     options={{
       headerTitle: props => <Logo {...props} />,
     }}
   />

RN的开发流程