刚接触网站建设有哪些问题,app界面设计模板免费下载,济南网站优化公司哪家好,平面网页设计教学reactNative混合安卓开发 reactNative开发移动端reactNative界面开发前端init.bat文件部分组件第三方组件解析1、定义theme主题shopify/restyle#xff1b;菜单导航react-navigation/drawer、react-navigation/native#xff1b; RN问题记录1、使用theme.js写的公共组件报错shopify/restyle菜单导航react-navigation/drawer、react-navigation/native RN问题记录1、使用theme.js写的公共组件报错funcMap[props] undefined2、安装react-native-reanimated后运行yarn android启动程序报错 reactNative开发移动端
用reactNativeVsCode编译器开发移动端界面Android开发后端接口Android Studio编译器。 RN官网搭建环境于API手册https://reactnative.cn/docs/environment-setup
reactNative界面开发
背景 reactNative提供组件或者使用第三方库提供的组件数据(包含规则校验)由 yup、formik提供除启动界面login,register,splash等账户登录后一般使用导航栏react-navigation/drawer、‘npm install react-native-gesture-handler react-native-reanimated’包含抽屉Drawer Navigator、tab切换Bottom Tabs Navigator进行路由导航一般适用于简单页面切换详情API请看https://reactnavigation.org/docs/drawer-navigator RN前端开发技巧 1\写了一系列组件或者网上推荐好用的组件放到component文件夹下每个组件用export default xxx;【其他界面也可以加default】定义index.ts放在component文件夹下index.ts中写各个组件的export {default as Header} from ./Header;集中一起导出使用时在界面中引入import { theme, Box, Text, Header, LableValueInput, Error, Loading, ConfirmModal, } from ~/component; 例如: index.ts 其他界面也可以借鉴index.ts的思路
export {default as Container} from ./Container;
export {default as Footer} from ./Footer;
export {default as Button} from ./Button;
export {default as theme,Text,Box} from ./Theme;
export {default as RoundedIcon} from ./RoundedIcon;
export {default as Header} from ./Header;export {default as TextInput, } from ./Form/TextInput;
export {default as TextInputRightBtn} from ./Form/TextInputRightBtn;
export {default as LableValueInput} from ./Form/LableValueInput;
export {default as CusCheckbox} from ./Form/CusCheckbox;export { AuthContext} from ./context/AuthContext;
export { UserContext} from ./context/UserContext;
export { default as Loading} from ./Loading;
export { default as Error} from ./Error;
// export { default as IDCard0} from ./IDCard0;
// export { default as Tabs} from ./Tabs;
// export { default as UpgradeAppModel} from ./UpgradeAppModel;
export { default as ConfirmModal} from ./ConfirmModal;前端init.bat文件部分组件
rem 界面基础组件
yarn add react-native
yarn add ant-design/react-nativerem 界面数据(formik)与表单验证(Yup验证规则)
npm install yup
npm install formikrem 统一样式模板
yarn add shopify/restylerem 其他组件第三方
yarn add react-native-keyboard-aware-scroll-view
rem 菜单导航栏
yarn add react-navigation/drawer
yarn add react-navigation/native
yarn add react-native-gesture-handler react-native-reanimated
第三方组件解析
1、定义theme主题shopify/restyle菜单导航react-navigation/drawer、react-navigation/native
1实现修改少量参数切换主题api文档地址https://github.com/Shopify/restyle 2navigation相关文档可配合context使用上下文和hook进行数据传递和接口调用刺激界面刷新需要搜索案例 https://reactnavigation.org/docs/drawer-navigator 使用 在navigation界面或者app.js中定义ThemeProvider theme{theme}/ThemeProvider,颜色可取 theme.themecolors.primary等等。
import { createDrawerNavigator } from react-navigation/drawer;
import { NavigationContainer } from react-navigation/native;import {ThemeProvider,createBox,createText,createRestyleComponent,createVariant,VariantProps,} from shopify/restyle;import theme from ~/component/Theme;
const Drawer createDrawerNavigator();
export default function XXXDrawerNavigator() {return (ThemeProvider theme{theme}NavigationContainerDrawer.Navigator initialRouteNameHome otherProps...Drawer.Screen nameHome component{HomeScreen} options{{title: XXX配置,otherProps...,}}/Drawer.ScreenDrawer.Screen nameNotifications component{NotificationsScreen} options{{title: XXX分析,drawerIcon: ({focused, size}) (Ioniconsnamecheckmark-circle-outlinesize{size}color{focused ? #7cc : #ccc}/),}}/Drawer.Screen/Drawer.Navigator/NavigationContainer/ThemeProvider
}
RN问题记录
1、使用theme.js写的公共组件报错funcMap[props] undefined
原因import shopify/restyle没有定义 ThemeProvider theme{theme}/ThemeProvider 解决方式在根页面定义ThemeProvider theme{theme}ThemeProvider,或单独使用的页面也要加这个。 案例如下 描述 导航页TCPZDrawerNavigator.js引入ThemeProvider标签使用页面YDLXDTList.js应用组件LableValueInput定义公共组件LableValueInput.js使用了shopify/restyle、theme 使用公共组件和统一样式:代码只包含使用公用组件LableValueInput用法样式部分可能会报错需要修改
import React, { useState } from react;
import * as Yup from yup;
import { Formik, useFormik, useField } from formik;
// 原生接口
import { YDLXDTService, RunActivity } from ~/native/nativeModules;
import {Container,Button,Box,CusCheckbox,Header,UserContext,LableValueInput,ConfirmModal, Error} from ~/components//模板校验规则
const ydlxdtSchema Yup.object().shape({mc: Yup.string()// 只能输入数字、字母、汉字.matches( /^[\da-zA-Z\u4E00-\u9FA5]$/u,图层名称存在违规字符请重新输入).required(图层名称必填),lx: Yup.string().matches( /^[\da-zA-Z_\u4E00-\u9FA5\-.]$/u,矢量数据类型存在违规字符请重新输入),address: Yup.string().matches( /^[\da-zA-Z_\u4E00-\u9FA5\-.]$/u,详细地址存在违规字符请重新输入).required(详细地址必填),dh: Yup.string().matches( /^[\da-zA-Z_\u4E00-\u9FA5\-.]$/u,地号存在违规字符请重新输入),zValue: Yup.string().matches( /^[\da-zA-Z\u4E00-\u9FA5]$/u,证书编号的字存在违规字符请重新输入).required(证书编号的字必填),hValue: Yup.string().matches( /^[\da-zA-Z\u4E00-\u9FA5]$/u,证书编号的号存在违规字符请重新输入).required(证书编号的号必填),syqmj: Yup.number(),page: Yup.number().min(1),});export function YDLXDTList() {
// 这里有其他定义的let [ydlxdt, setYdlxdt] React.useState({});
const { handleChange, handleBlur, handleSubmit, errors,touched,values,setFieldValue,setValues }useFormik({validationSchema:ydlxdtSchema,initialValues: {tcid: ydlxdt?.tcid,xh: ydlxdt ydlxdt.xh ? ydlxdt.xh : ,mc:ydlxdt ydlxdt.mc?ydlxdt.mc:,lx: ydlxdt ydlxdt.lx?ydlxdt.lx:,fz:ydlxdt ydlxdt.fz?ydlxdt.fz:,fzxh:ydlxdt ydlxdt.fzxh ?ydlxdt.fzxh :,tbzt:ydlxdt ydlxdt.tbzt?ydlxdt.tbzt:是,tbsj:ydlxdt ydlxdt.tbsj?ydlxdt.tbsj:,sfdt:ydlxdt ydlxdt.sfdt? ydlxdt.sfdt:,sfnbcc :ydlxdt ydlxdt.sfnbcc? ydlxdt.sfnbcc:,minScale: ydlxdt ydlxdt.minScale?ydlxdt.minScale:,maxScale: ydlxdt ydlxdt.maxScale?ydlxdt.maxScale:,sfjz: ydlxdt ydlxdt.sfjz?ydlxdt.sfjz:,ipaddress:ydlxdt?.ipaddress,sfquery: ydlxdt?.sfquery,sfzyfx: ydlxdt?.sfzyfx},onSubmit: values {console.log(onsubmit);debugger;console.log(values);// 处理 每个字段是否包含敏感词并直接替换为空handleSensitiveWord(values);
dataHandle.qzxx_save(userData.token,values,saveQzxxCallBack,refreshQZXXState); },});return (
SafeAreaView style{styles.container}Loading loading{loading}/LoadingLableValueInputlabelName权利人placeholder请输入权利人value{values.qlrxm}onChangeText{handleChange(qlrxm)}onBlur{handleBlur(qlrxm)}error{errors.qlrxm}touched{touched.qlrxm}borderBottomColortext2labelTextCss{styles.labelTextCss}style{styles.valueText}/
/SafeAreaView
)}定义LableValueInput组件
import React, { useState,forwardRef } from react;
import {View,StyleSheet,TextInput } from react-native;
import Icon from react-native-vector-icons/Ionicons;
import theme,{ Box,Text} from ../Theme;
import RoundedIcon from ../RoundedIcon;const SIZE theme.borderRadii.m*2;const LableValueInput forwardRef(({labelName,touched,error,borderBottomColor,labelTextCss,...props},ref){debugger;const reColor !touched ? text2 : error ? danger : primary;const colortheme.colors[reColor];return (Box flexDirectionrow alignItems center borderBottomWidth{StyleSheet.hairlineWidth}{...{borderBottomColor}}Text style{labelTextCss}{labelName}/TextTextInput underlineColorAndroidtransparent flex{1}placeholderTextColor{color}{...{ref}}{...props}/{(touched) (RoundedIconname{!error?ios-checkmark:ios-close}size{SIZE}backgroundColor{!error?primary:danger}colorwhite /)}/Box)
})
export default LableValueInput;导航页面TCPZDrawerNavigator.js引用theme、shopify/restyle
import * as React from react;
import { Button, View } from react-native;
import { createDrawerNavigator } from react-navigation/drawer;
import { NavigationContainer } from react-navigation/native;import HomeScreen from ~/module/screens/tcpz/HomeScreen;
import LxdtScreen from ~/module/screens/xmhc/YDLXDTList;
import Ionicons from react-native-vector-icons/Ionicons;
import MaterialIcons from react-native-vector-icons/MaterialIcons;import {GEONavigator} from ~/module/navigators/GEONavigator;
import {YDLXDTNavigator} from ~/module/navigators/YDLXDTNavigator;import CustomerDrawer from ~/module/navigators/CustomerDrawer;
import {ThemeProvider,createBox,createText,createRestyleComponent,createVariant,VariantProps,} from shopify/restyle;import theme from ~/component/Theme;
const Drawer createDrawerNavigator();
const focused#7cc;
const size 22;
// 图层配置菜单
export default function TCPZDrawerNavigator() {return (ThemeProvider theme{theme}NavigationContainerDrawer.Navigator initialRouteNameHome screenOptions{{headerShown:true,drawerActiveBackgroundColor:#7cc,drawerActiveTintColor:#fff, drawerInactiveTintColor:#333, drawerLabelStyle:{marginLeft:-25,fontFamily:Roboto-Medium,fontSize:15}}} drawerContent{props CustomerDrawer {...props} /}Drawer.Screen nameHome component{HomeScreen} options{{title: 图层配置,drawerIcon: ({focused, size}) (Ioniconsnameglobe-outlinesize{size}color{focused ? #7cc : #ccc}/),}}/Drawer.ScreenDrawer.Screen nameYDLXDTNavigator component{YDLXDTNavigator} options{{title: 离线地图,drawerIcon: ({focused, size}) (MaterialIconsnameworkspaces-outlinesize{size}color{focused ? #7cc : #ccc}/),}}/Drawer.Screen nameGEONavigator component{GEONavigator} options{{title: Geo,drawerIcon: ({focused, size}) (MaterialIconsnameworkspaces-outlinesize{size}color{focused ? #7cc : #ccc}/),}}//Drawer.Navigator/NavigationContainer/ThemeProvider);
}2、安装react-native-reanimated后运行yarn android启动程序报错
解决方案在本地 babel.config.js添加Reanimated’s babel plugin module.exports {presets: [...],plugins: [...react-native-reanimated/plugin,],};在添加react-native-reanimated/plugin后你可能会遇到Reanimated 2 failed to create a worklet error需要清除应用缓存可以执行命令yarn start --reset-cache或 npm start -- --reset-cache或 expo start -c
