创建react native项目的笔记

- [重新下载 ruby](#重新下载 ruby)
- [安装 watchman](#安装 watchman)
- [安装 cocoapods](#安装 cocoapods)
- [安装 react native 项目](#安装 react native 项目)
- [创建好项目后安装 ios 依赖](#创建好项目后安装 ios 依赖)
- 清除设备缓存
- [安装 android 依赖](#安装 android 依赖)
- [链接网易 mumu 模拟器](#链接网易 mumu 模拟器)
- [安装路由 Navigation](#安装路由 Navigation)
- 页面之间的跳转逻辑
- 自定义头部样式
- 判断不同设备平台代码示例
- [安装 Axios](#安装 Axios)
- 安装本地简单存储工具
- 安装轮播图
- [安装 Toast 消息弹出框](#安装 Toast 消息弹出框)
- 公共信息确认框
- 安装线性渐变色
- 安装富文本解析器
- 安装下拉选择插件
- 安装上传图片插件
- [类似于小程序 onShow 生命周期](#类似于小程序 onShow 生命周期)

重新下载 ruby

1.ruby环境必须是2.6.10版本以上(查看ruby版本 ruby -v)

brew reinstall ruby

2.进入vim编辑器
vim ~/.zshrc

3.配置
export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"

4.重新执行一下文件
source ~/.zshrc

安装 watchman

brew install watchman

安装 cocoapods

sudo gem install cocoapods
pod setup

安装 react native 项目

npx react-native@latest init <项目名称>

npx react-native run-ios
npx react-native run-android

创建好项目后安装 ios 依赖

1.第一步
进入ios文件夹
cd ios

2.第二步
bundle install

3.第三步
bundle exec pod install

运行项目打包ios

清除设备缓存

1.android
npx react-native start --reset-cache

2.ios
npx react-native start --reset-cache --reset-cache

安装 android 依赖

cd android
./gradlew clean
cd ..
npx react-native run-android

链接网易 mumu 模拟器

1.windows
adb connect 127.0.0.1:7555

2.mac
adb connect 127.0.0.1:5555

1.第一步
npm install @react-navigation/native

2.第二步
npm install react-native-screens react-native-safe-area-context

react-native-safe-area-context：提供了处理安全区域（Safe Area）的能力。安全区域是指屏幕上不受刘海屏、圆角等系统元素遮挡的区域

在App.jsx文件中引入
（NavigationContainer是一个组件，用于管理我们的导航树并包含导航状态。
这个组件必须包裹所有的导航器结构。通常，我们会在应用程序的根部渲染这个组件，这通常是从App.js导出的组件）
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';

安装的库是导航器的构建块和共享基础

3.第三步
npm install @react-navigation/native-stack

@react-navigation/native-stack依赖于react-native-screens和上面安装的其他库

在App.jsx文件中引入
import { createNativeStackNavigator } from '@react-navigation/native-stack';

4.安装底部tab切换
npm install @react-navigation/bottom-tabs

Tab.Navigator组件的screenOptions属性用于设置所有Tab.Screen组件的默认选项和样式。下面是一些常用的样式选项：
- tabBarStyle：设置标签栏的样式，可以包括backgroundColor、height、borderTopWidth等。
- tabBarActiveTintColor：设置活动标签的文本颜色。
- tabBarInactiveTintColor：设置非活动标签的文本颜色。
- tabBarLabelStyle：设置标签的文本样式，可以包括fontFamily、fontSize、fontWeight等。
- tabBarIconStyle：设置标签图标的样式，可以包括width、height、tintColor等。
- tabBarIndicatorStyle：设置标签栏指示器的样式，可以包括backgroundColor、height等。
- tabBarPressColor：设置标签栏被按下时的颜色。
- tabBarPressOpacity：设置标签栏被按下时的不透明度。

Tab.Screen组件的options属性用于设置选项，可以通过它来自定义标签页的外观和行为。下面是一些常用的设置项：
- tabBarLabel：标签页的显示文本。
- tabBarIcon：标签页的图标，可以使用图标组件或自定义图标。
- tabBarVisible：设置标签页是否可见。
- tabBarAccessibilityLabel：设置标签页的辅助功能标签。
- tabBarTestID：设置标签页的测试ID，用于测试目的。
- tabBarBadge：设置标签页的徽章，显示在图标上，并可以用于显示未读消息数等。
- tabBarBadgeStyle：设置标签页徽章的样式。
- tabBarButtonComponent：自定义标签页的按钮组件。
- tabBarOnPress：点击标签页时触发的回调函数。

页面之间的跳转逻辑

navigation.popToTop();//返回顶部页面

navigation.goBack(2,{
  
}); // 返回到第二个页面

navigation.navigate('Fourth',{

});//跳转到对应页面

import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate('List');

import { useRoute } from '@react-navigation/native';
const route = useRoute();
route.params

添加

npm install react-native-gesture-handler

自定义头部样式

1.headerStyle：
 一个应用于包裹标题的View的样式对象。如果在上面设置了backgroundColor，那么标题的颜色将为该颜色

- backgroundColor：标题栏的背景颜色。
- borderBottomColor：标题栏底部边框的颜色。
- borderBottomWidth：标题栏底部边框的宽度。
- height：标题栏的高度。


2.headerTintColor：
返回按钮和标题都使用此属性作为它们的颜色。在下面的示例中，我们将tintColor设置为白色（#fff），以使返回按钮和标题为白色。

- 颜色名称：您可以使用预定义的颜色名称，如"red"、"blue"、"green"等。
- 十六进制值：您可以使用十六进制颜色代码，如"#FF0000"代表红色。
- RGB值：您可以使用RGB值来指定颜色，如"rgb(255, 0, 0)"代表红色。

3.headerTitleStyle属性用于自定义标题的样式，可以设置以下样式属性：

- fontFamily：标题的字体族名称（如"Arial"、"Helvetica"等）。
- fontWeight：标题的字重（如"bold"、"normal"等）。
- fontSize：标题的字号大小。
- color：标题的颜色。
- textAlign：标题的对齐方式（如"left"、"center"、"right"等）。
- textTransform：标题的文本转换方式（如"uppercase"、"lowercase"等）。
- letterSpacing：标题的字间距。
- lineHeight：标题的行高。

判断不同设备平台代码示例

const refreshControl = Platform.select({
    ios: <RefreshControlIOS
           refreshing={refreshing}
           onRefresh={handleRefresh}
         />,
    android: <RefreshControl
                refreshing={refreshing}
                onRefresh={handleRefresh}
              />
});

安装 Axios

npm install axios

安装本地简单存储工具

1.第一步
npm install @react-native-async-storage/async-storage

2.第二步
导入库并使用AsyncStorage
import AsyncStorage from "@react-native-async-storage/async-storage";

// token模块
const TokenKey = 'windoentToken';
//存储数据
export const setToken = async value => {
  await AsyncStorage.setItem(TokenKey, value);
};

//获取数据
export const getToken = async () => {
  try {
    const value = await AsyncStorage.getItem(TokenKey);
    return value;
  } catch (error) {
    return null;
  }
};

//删除数据
export const removeToken = async () => {
  await AsyncStorage.removeItem(TokenKey);
};

安装轮播图

npm install react-native-swiper

安装 Toast 消息弹出框

1.安装
npm install --save react-native-toast-message

2.在App.jsx中注册全局
// App.jsx
import Toast from 'react-native-toast-message';

export function App(props) {
  return (
    <>
      {/* ... */}
      <Toast />
    </>
  );
}

3.组件中使用
import Toast from 'react-native-toast-message';
Toast.show({
  type: 'success',//`success`、`error`、`info`
  text1: 'Hello',
  text2: 'This is some something 👋'
});

公共信息确认框

1.在组件中引入
import ShowModal from '../../componets/ShowModel';

2.在组件中注册
<ShowModal ref={showModelRef} />

const showModelRef = useRef(null);
  const showMOdel = () => {
    showModelRef.current.show({
      title: '标题',
      content: '内容-加油',
      success: res => {
        console.log('[返回值-12]', res);
      },
    });
  };

安装线性渐变色

1.安装
npm install react-native-linear-gradient

2.使用
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient
      colors={['#FFAA6B', '#FF5B23']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={{ flex: 1 }}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ color: 'white', fontSize: 24 }}>Hello, this is a gradient background!</Text>
      </View>
</LinearGradient>

安装富文本解析器

1.安装
npm install react-native-htmlview --save

2.使用
import HTMLView from 'react-native-htmlview';
render() {
    const htmlContent = `<p><a href="http://jsdf.co">&hearts; nice job!</a></p>`;

    return (
      <HTMLView
        value={htmlContent}
        stylesheet={styles}
      />
    );
  }

  const styles = StyleSheet.create({
  a: {
    fontWeight: '300',
    color: '#FF3366', // make links coloured pink
  },
});

安装下拉选择插件

React Native >= 0.60+
https://www.npmjs.com/package/react-native-wheel-pick
1.安装
npm install react-native-wheel-pick --save-dev --legacy-peer-deps
npm install @react-native-picker/picker --save-dev --legacy-peer-deps
npm install @react-native-community/datetimepicker --save-dev --legacy-peer-deps

2.安装日期
https://www.npmjs.com/package/react-native-date-picker?activeTab=readme
npm install react-native-date-picker --save

安装上传图片插件

https://github.com/react-native-image-picker/react-native-image-picker
1.安装
npm install react-native-image-picker -S

2.使用
import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

//点击上传图片
  const uploadHandle = async () => {
    const options = {
      mediaType: 'photo', //photo or video or mixed(launchCamera on Android does not support 'mixed').
      quality: 0.5,
      selectionLimit: 1,
    };
    const response = await launchImageLibrary(options);
    console.log('[]', response);
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      // Get image source
      const files = response.assets;
      const source = {
        type: files[0].type,
        uri: files[0].uri,
        name: files[0].fileName,
        fileSize: files[0].fileSize,
      };
      // Set image source
      console.log('[上传图片]', source);
    }
  };

类似于小程序 onShow 生命周期

import {useFocusEffect} from '@react-navigation/native';
const [appStatus, setAppStatus] = useState(true);
useEffect(() => {
    console.log('[页面状态]', appStatus);
    if (appStatus) {
      getInitList();
    }
    return () => {
      // 在组件销毁时触发
    };
  }, [appStatus]);

  useFocusEffect(() => {
    setAppStatus(true);
    return () => {
      setAppStatus(false);
    };
  });

创建react native项目的笔记

创建react native项目的笔记

重新下载 ruby

安装 watchman

安装 cocoapods

安装 react native 项目

创建好项目后安装 ios 依赖

清除设备缓存

安装 android 依赖

链接 网易 mumu 模拟器

安装路由 Navigation

页面之间的跳转逻辑

自定义头部样式

判断不同设备平台代码示例

安装 Axios

安装本地简单存储工具

安装轮播图

安装 Toast 消息弹出框

公共信息确认框

安装线性渐变色

安装富文本解析器

安装下拉选择插件

安装上传图片插件

类似于小程序 onShow 生命周期

链接网易 mumu 模拟器