莆田做网站,搜狐快站做网站教程,网站开发修改端口,百度搜索引擎营销模拟器设置成中文
在开发过程中发现#xff0c;两个模拟器都不能输入中文#xff0c;所以需要配置一下。
先说一下安卓#xff0c;在弹出的输入框中查看设置#xff0c;设置一下对应的languages即可#xff1a; 在苹果模拟器中#xff0c;跟苹果手机一样#xff0c;打…模拟器设置成中文
在开发过程中发现两个模拟器都不能输入中文所以需要配置一下。
先说一下安卓在弹出的输入框中查看设置设置一下对应的languages即可 在苹果模拟器中跟苹果手机一样打开设置然后打开通用同样设置语言
路由搭建
我在这里走了弯路去了另一个库…路由文档入口在这链接
sudo npm install react-navigation/native
# 兼容expo
sudo 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.js
import 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 nameHabitHome component{HabitHome}options{{title: ,tabBarLabel: 打卡,tabBarIcon: ({ color, size }) (Feather nametarget color{color} size{size} /),}} /Tab.Screen nameDateHome component{DateHome}options{{title: ,tabBarLabel: 纪念日,tabBarIcon: ({ color, size }) (MaterialCommunityIcons namecalendar-heart color{color} size{size} /),}} //Tab.Navigator)
}// 将底部导航栏和非底部导航栏的页面都写在这里
const Stack createNativeStackNavigator();function PageStack(){return (Stack.NavigatorStack.ScreennameTabStackcomponent{TabStack}options{{ headerShown: false }}/Stack.Screen nameHabitDetail component{HabitDetail} options{{ title: 习惯详情 }} /Stack.Screen nameHabitSet component{HabitSet}options{{title: 添加一个习惯}} /Stack.Screen nameDateSet 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/indexfunction App() {return (Provider store{store}NavigationContainerPageStack //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-buttonReact 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
