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