reactNative混合安卓开发
- reactNative开发移动端
- reactNative界面开发
- RN问题记录
- 1、使用theme.js写的公共组件报错（funcMap[props] undefined）
reactNative开发移动端
用reactNative（VsCode编译器）开发移动端界面，Android开发后端接口（Android Studio编译器）。
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
前端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
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}></Loading><LableValueInputlabelName="权利人"placeholder="请输入权利人"value={values.qlrxm}onChangeText={handleChange('qlrxm')}onBlur={handleBlur('qlrxm')}error={errors.qlrxm}touched={touched.qlrxm}borderBottomColor="text2"labelTextCss={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 color=theme.colors[reColor];return (<Box flexDirection="row" alignItems = "center" borderBottomWidth={StyleSheet.hairlineWidth}{...{borderBottomColor}}><Text style={labelTextCss}>{labelName}</Text><TextInput underlineColorAndroid="transparent" flex={1}placeholderTextColor={color}{...{ref}}{...props}/>{(touched) && (<RoundedIconname={!error?"ios-checkmark":"ios-close"}size={SIZE}backgroundColor={!error?"primary":"danger"}color="white" />)}</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}><NavigationContainer><Drawer.Navigator initialRouteName="Home" screenOptions={{headerShown:true,drawerActiveBackgroundColor:'#7cc',drawerActiveTintColor:'#fff', drawerInactiveTintColor:'#333', drawerLabelStyle:{marginLeft:-25,fontFamily:'Roboto-Medium',fontSize:15}}} drawerContent={props =><CustomerDrawer {...props} />}><Drawer.Screen name="Home" component={HomeScreen} options={{title: '图层配置',drawerIcon: ({focused, size}) => (<Ioniconsname="globe-outline"size={size}color={focused ? '#7cc' : '#ccc'}/>),}}></Drawer.Screen><Drawer.Screen name="YDLXDTNavigator" component={YDLXDTNavigator} options={{title: '离线地图',drawerIcon: ({focused, size}) => (<MaterialIconsname="workspaces-outline"size={size}color={focused ? '#7cc' : '#ccc'}/>),}}/><Drawer.Screen name="GEONavigator" component={GEONavigator} options={{title: 'Geo',drawerIcon: ({focused, size}) => (<MaterialIconsname="workspaces-outline"size={size}color={focused ? '#7cc' : '#ccc'}/>),}}/></Drawer.Navigator></NavigationContainer></ThemeProvider>);
}
