React Native学习记录

一、创建RN项目的时候是空文件夹的问题

1.使用npx react-native init RNDemos初始化项目的时候，会报错，模版错误，然后创建出来一个空的文件夹

2.如果出现这种情况，需要设置npm install -g react-native-cli 

3.安装完成以后再次初始化项目，会进行报错，是因为node版本低的问题，我们使用的node版本需要大于18才能初始化项目成功

二、使用nvm来进行node版本的管理

1.安装nvm版本管理器

2.使用nvm list来查看可以使用的node版本

3.使用nvm来安装指定的node版本

4.使用nvm切换node版本

三、初始化RN项目

1.可以使用npx react-native init MyAwesomeApp初始化项目

2.初始化成功以后的项目目录结构如下：

3.可以使用npm run ios在模拟器上运行RN项目

4.此时可以在模拟器上运行到项目

5.如果要在真机上运行项目，需要打开ios文件夹里面的.xcworkspace，然后修改bundleId,然后运行，就可以在手机上进行运行

四、调试工程

React Native中文网调试 · React Native 中文网

1.使用真机开发时，只需要晃动设备就可以打开调试功能，需要注意的是，使用真机进行调试的时候，调试的真机和开发程序的计算机需要在同一个网络环境下

五、安装指定版本的React-Native项目

1.使用react-native init --version='0.66.4' RNDemo命令安装指定版本的RN项目

需要注意的点：如果使用高版本的node,那么会安装最新版本的react-native，指定版本的react-native项目就无效，所以我们需要使用低版本的node进行安装

2.安装成功之后会没有.workspace项目，我们需要切换到含有podfile的目录下pod install进行pod库的安装

3.安装成功以后打开workspace文件就可以运行Rn项目了

六、调试RN项目

1.使用react-native start --port 端口号来进行项目运行

七、React-Native当中的标签

1.View标签

1）相当于以前web当中的div标签

2）不支持设置字体大小、字体颜色等

3）不能直接放文本内容

4）不支持直接绑定点击事件（一般使用TouchableOpacity来代替）

2.Text文本标签

1）文本标签可以设置字体颜色、字体大小等

2）支持绑定点击事件

3.TouchableOpacity(可以绑定点击事件的块级标签）

1）相当于块级的容器

2）支持绑定点击事件onPress

3）可以设置点击时的透明度

import {Component} from 'react';
import React from 'react';
import {Text, TouchableOpacity, StyleSheet, Alert} from 'react-native';

class Test extends Component {
  handlePress() {
    Alert.alert('点击弹框');
  }
  render() {
    return (
      <TouchableOpacity
        activeOpacity={0}
        style={{marginTop: 60, marginLeft: 20}}
        onPress={this.handlePress}>
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
    );
  }
}

export default Test;

4.Image标签

      <View>
          <Image source={require('./images/1.png')} style={{height: 50}} />
          <Image source={require('./images/scan.gif')} style={{height: 50}} />
          <Image
            source={require('./images/profileBackground.jpg')}
            style={{height: 50}}
          />

          {/* 如果加载网络图片的时候，需要提供直接指向图片文件的链接，例如.jpg,.png等格式的链接，而不是一个网页 */}
          <Image
            style={{width: 200, height: 50}}
            source={{
              uri: 'https://lmg.jj20.com/up/allimg/tp10/22022312542M617-0-lp.jpg',
            }}
          />
        </View>

​​​​​​​5.ImageBackground

一个可以使用图片当作背景的容器，相当于以前的div+背景图片

  <ImageBackground source={require('./images/1.png')}>
     <Text>Inside</Text>
  </ImageBackground>

​​​​​​​​​​​​​​6.TextInput

输入框组件，可以通过onChangeText事件来获取输入框的值

        {/* 当文本框的值改变的时候进行执行此函数 */}
        <TextInput
          onChangeText={text => {
            Alert.alert(text);
          }}
        />

7.FlatList

高性能的简单列表组件，支持下面这些常用的功能：

1）完全支持跨平台

2）支持水平布局模式

3）行组件显示或隐藏可配置回调事件

4）支持单独的头部组件

5）支持单独的尾部组件

6）支持自定义行间分割线

7）支持下拉刷新

8）支持上拉加载

9）支持跳转到指定行(ScrollToIndex）

10）支持多行布局

如果需要分组/类/区（section），请使用<SectionList>

 <FlatList
          style={{height: 100}}
          data={this.state.list}
          renderItem={({item, index}) => {
            console.log(item);
            return (
              <View>
                <Text>{item.title}</Text>
              </View>
            );
          }}
          keyExtractor={item => item.id}
          ItemSeparatorComponent={() => {
            // 声明项目之间的分隔符
            return <View></View>;
          }}
          ListEmptyComponent={() => {
            // 列表数据为空时，展示的组件
            return <Text style={{fontSize: 30}}>空空如也!</Text>;
          }}
          // 下拉刷新
          refreshing={this.state.isloading}
          onRefresh={() => {
            this.setState({
              isloading: true,
            });

            // 模拟网络请求
            setTimeout(() => {
              // 模拟请求数据
              Alert.alert('刷新请求数据');
              this.setState({
                isloading: false,
              });
            }, 2000);
          }}
          // 上拉加载
          onEndReachedThreshold={0.1} // 声明触底的比率，0.1表示距离底部还有10%
          onEndReached={() => {
            Alert.alert('到底了');
          }}
          ListHeaderComponent={() => {
            // 声明列表的头部组件
            return <Text>列表头部</Text>;
          }}
          // 设置水平排列
          // horizontal={true}
          // initialScrollIndex={3} // 初始滚动索引
          initialNumToRender={4} // 指定初始渲染数据的数量，一般数量要填满一屏幕
          numColumns={3} // 指定列数，数据项必须等高，无法支持瀑布流
          // inverted={true} // 列表反转
          ListFooterComponent={() => {
            // 声明列表的尾部组件
            return <Text>没有更多了</Text>;
          }}></FlatList>

八、StyleSheet

1.RN中的样式和CSS中的不同

1）没有继承性

RN中的继承只发生在Text组件上

2）样式名采用小驼峰命名

fontSize

3）所有尺寸都是没有单位的

width:100

4）有些特殊的样式名

marginHorizontal(水平外边距） marginVertical（垂直外边距）

2.RN样式的声明方式

1.通过style属性直接声明

1）属性值为对象：<组件 style={{样式}}/>

2）属性值为数组: <组件 style={[{样式1},...{样式N}]}/>

2.在style属性中调用StyleSheet声明的样式

1）引入

import {StyleSheet} from 'react-native'

2）声明

const styles = StyleSheet.create({foo:{样式1},bar:{样式2}})

3）使用:<View style={[styles.foo, style.bar]}>内容</View>

<View style={{marginHorizontal: 20, backgroundColor: '#dfb'}}>
     <Text style={[styles.red, styles.fontLarge]}>Hello RN</Text>
</View>
const styles = StyleSheet.create({
  red: {
    color: '#e33',
  },
  fontLarge: {
    fontSize: 40,
  },
});

九、调试环境和生产环境运行React Native项目

1.调试环境下运行React Native项目，当退出RN环境用手机打开应用会是空白页面，打不开

2.生产环境运行React Native项目

1）在RN项目终端运行如下命令

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

2）运行完成以后会生成一个main.jsbundle文件

3）​​​​​​​AppDelegate.m文件有进行判断，测试模式和生产模式

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

4）​​​​​​​如果想在生产环境运行，运行到手机上把环境放到Release模式下

​​​​​​​