【reactNative混合安卓开发~使用问题持续更】

qq_231282552023-08-09 12:42

reactNative混合安卓开发

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文件部分组件

js 复制代码 
rem 界面基础组件
yarn add react-native
yarn add @ant-design/react-native

rem  界面数据(formik)与表单验证(Yup验证规则)
npm install yup
npm install formik

rem 统一样式模板
yarn add @shopify/restyle

rem 其他组件（第三方）
yarn add react-native-keyboard-aware-scroll-view
rem 菜单导航栏
yarn add @react-navigation/drawer
yarn add react-native-gesture-handler react-native-reanimated

RN问题记录

1、使用theme.js写的公共组件报错（funcMapprops undefined）

原因 ：import @shopify/restyle没有定义 <ThemeProvider theme={theme}></ThemeProvider>
解决方式 ：在根页面定义<ThemeProvider theme={theme}><ThemeProvider>,或单独使用的页面也要加这个。
案例如下

描述： 导航页TCPZDrawerNavigator.js引入ThemeProvider标签；使用页面YDLXDTList.js应用组件LableValueInput；定义公共组件LableValueInput.js（使用了@shopify/restyle、theme）
使用公共组件和统一样式:代码只包含使用公用组件LableValueInput用法，样式部分可能会报错，需要修改

js 复制代码 
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>
			<LableValueInput
          labelName="权利人"
          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组件

js 复制代码 
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) && 
                (
                    <RoundedIcon
                    name={!error?"ios-checkmark":"ios-close"}
                    size={SIZE}
                    backgroundColor={!error?"primary":"danger"}
                    color="white" 
               />
                )
            }
        </Box>
    )
})
export default  LableValueInput;

导航页面TCPZDrawerNavigator.js引用theme、@shopify/restyle

js 复制代码 
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}) => (
              <Ionicons
                 name="globe-outline"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}></Drawer.Screen>
        
            <Drawer.Screen name="YDLXDTNavigator" component={YDLXDTNavigator}   options={{
           title: '离线地图',
           drawerIcon: ({focused, size}) => (
              <MaterialIcons
                 name="workspaces-outline"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}/>
           <Drawer.Screen name="GEONavigator" component={GEONavigator}   options={{
           title: 'Geo',
           drawerIcon: ({focused, size}) => (
              <MaterialIcons
                 name="workspaces-outline"
                 size={size}
                 color={focused ? '#7cc' : '#ccc'}
              />
           ),
        }}/>
      </Drawer.Navigator>
      
    </NavigationContainer>
     </ThemeProvider>
  );
}
相关推荐
小程故事多_807 小时前
从 Tokenizer 到 Next Token，穿透数据流，完整理解 Transformer 底层逻辑
android·深度学习·transformer
Java后端的Ai之路8 小时前
14、ReactJS - 路由(Router)
前端·react.js·状态模式
三少爷的鞋10 小时前
Android 协程实践：为什么不应将 `supervisorScope` 作为常规方案
android
承渊政道11 小时前
【从零开始大模型开发与微调:基于PyTorch与ChatGLM】(从ChatGLM本地化到LoRA、PEFT的高级微调)
android·人工智能·pytorch·chatglm·本地化部署·大模型开发与微调
鶴哥只手遮天12 小时前
React 19.3.1 源码深度剖析-第 12 章（下）RSC 与 Flight 协议
前端·react.js·开源
2601_9628857213 小时前
如何用 Python 判断一只股票“追涨”还是“抄底”更有效？
android·开发语言·python
素师良码14 小时前
第10篇：屏ESD Check内核逻辑驱动代码完整拆解
android
高晶14 小时前
Android 短信收发模块从零到实战：权限配置、界面设计、发送接收与兼容性适配全攻略
android·程序员
HelloWorld00114 小时前
别再手写 fetch 了！用 Next.js 14 + SSE 打造媲美 ChatGPT 的生产级 AI 流式聊天前端（全套代码+避坑实战）
react.js
随遇丿而安14 小时前
第18周：ViewModel 基础功能 + 架构优化
android
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会03如何新建文件夹？ 电脑新建文件夹的4种方法04GitHub 镜像站点05历年考研数学一、数学二、数学三真题试卷及答案PDF06几个好用的ip纯净度检测网站07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08Telegram APK 下载安装完整指南 — 2026年最新09苹果iPA游戏软件资源下载网站10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）