在开发过程中发现，两个模拟器都不能输入中文，所以需要配置一下。
先说一下安卓，在弹出的输入框中查看设置，设置一下对应的languages即可： 在苹果模拟器中，跟苹果手机一样，打开设置，然后打开通用，同样设置语言：
路由搭建我在这里走了弯路，去了另一个库…，路由文档入口在这：链接
sudo npm install @react-navigation/native# 兼容exposudo npx expo install react-native-screens react-native-safe-area-context# 路由跳转的本质是堆栈sudo npm install @react-navigation/native-stack# 我们项目中会使用到底部导航栏跳转sudo npm install @react-navigation/bottom-tabs我要做的东西如下： 大概也能猜出哪些路由了，这里说一下路由中tab页面和普通页面的搭建，关于抽屉页面，后续使用了再补上：
// router/index.jsimport react from 'react';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { Feather } from '@expo/vector-icons';import { MaterialCommunityIcons } from '@expo/vector-icons';import HabitHome from '../views/habit/home/index';import HabitDetail from '../views/habit/detail/index';import HabitSet from '../views/habit/set';import DateHome from '../views/date/home/index';import DateSet from '../views/date/set/index';// 这里声明了底部tab页面有哪些，还配置了顶部导航栏的一些自定义按钮const Tab = createBottomTabNavigator();function TabStack(){return (<Tab.Navigator screenOptions={{ headerShown: true,tabBarInactiveTintColor: '#333',tabBarActiveTintColor: '#6528F7',tabBarShowLabel: true,}}><Tab.Screen name="HabitHome" component={HabitHome}options={{title: '',tabBarLabel: '打卡',tabBarIcon: ({ color, size }) => (<Feather name="target" color={color} size={size} />),}} /><Tab.Screen name="DateHome" component={DateHome}options={{title: '',tabBarLabel: '纪念日',tabBarIcon: ({ color, size }) => (<MaterialCommunityIcons name="calendar-heart" color={color} size={size} />),}} /></Tab.Navigator>)}// 将底部导航栏和非底部导航栏的页面都写在这里：const Stack = createNativeStackNavigator();function PageStack(){return (<Stack.Navigator><Stack.Screenname="TabStack"component={TabStack}options={{ headerShown: false }}/><Stack.Screen name="HabitDetail" component={HabitDetail} options={{ title: '习惯详情' }} /><Stack.Screen name="HabitSet" component={HabitSet}options={{title: '添加一个习惯'}} /><Stack.Screen name="DateSet" component={DateSet} options={{ title: '设置纪念日' }} /></Stack.Navigator>)}export default PageStack;接下来就是在App.js中使用了：
import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';import { Provider } from 'react-redux'import store from './store/index'import PageStack from './router/index'function App() {return (<Provider store={store}><NavigationContainer><PageStack /></NavigationContainer></Provider>);}export default App;用的状态管理器，还是redux，像以前在普通react项目中那样使用就行（官网地址）
开发技巧 ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染（还没滑动到下一屏幕，也是会被渲染出来），FlatList更适于长列表数据，且元素个数可以增删，和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。综上，如果列表太长的情况下，可以优先使用FlatList。View组件类似Div组件，但是没有点击事件；所有文字必须包含在Text组件中；Button组件在两端的机器上显示的不一样，所以为了确保样式一致性，我会使用View按钮来制作按钮；由于View上没有点击事件，所以我借助了TouchableOpacity，而安卓机上还有一个特有的组件：TouchableNativeFeedback，做了如下封装： import { TouchableOpacity, TouchableNativeFeedback, Platform } from 'react-native';function CommonButton (props){const { onPress, children } = props;if(Platform.OS === 'android') {return (<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('rgba(215, 187, 245, 0.5)', false)}onPress={onPress}>{ children }</TouchableNativeFeedback>)}else {return (<TouchableOpacity onPress={onPress}>{ children }</TouchableOpacity>)}}export default CommonButton; 从上面的例子可知Platform可以用来判断端的类型，如果你觉得一个文件编写两套代码麻烦，可以改成下面的方式： - common-button.ios.js- common-button.android.js在引入文件的时候还是直接写：
import CommonButton from 'xxx/xxx/common-button'React Native中的flex跟平常的还是有些区别的；
由于样式的局限性，所以在项目中我想借助float来写瀑布流样式是不支持的，后来实现的方法是采用了拆分成了两列：
生成随机数有很多种npm包供使用，比如nanoid，但是它不兼容React Native，这里采用了uuid:
npm i uuid react-native-get-random-values // store/modules/habitimport { createSlice } from '@reduxjs/toolkit';import 'react-native-get-random-values';import { v4 as uuidv4 } from 'uuid';const defaultList = [{id: uuidv4(10),name: '打卡',count: 0,},]// ... expo包内置了图标，文档地址：@expo/vector-icons；路由跳转，在页面的props中可以获取navigation对象： function HabitHome(props) {const { navigation } = props;// ...// 新增打卡const goSetPage = () => {navigation.navigate('HabitSet')}// ...} 当用户在输入某些内容，会弹出键盘，键盘有时候会挡住页面，可以借助KeyboardAvoidingView组件，本组件可以自动根据键盘的高度，调整自身的 height 或底部的 padding，以避免被遮挡；另外键盘弹出之后，我们希望可以在点击其他地方的时候自动收回键盘，那么可以借助TouchableWithoutFeedback，最终代码如下： function HabitSet(props) {// ...// 收起键盘const onPress = () => {Keyboard.dismiss();}return (<TouchableWithoutFeedback onPress={onPress}><KeyboardAvoidingView style={styles.container} behavior={Platform.OS == "ios" ? "padding" : "height"}>// ...</KeyboardAvoidingView></TouchableWithoutFeedback>);} 参考 exporeact nativereact-navigation图标配色参考react-redux
