react-native开发问题以及处理

最新推荐文章于 2024-08-01 13:45:06 发布

高桥靓仔

最新推荐文章于 2024-08-01 13:45:06 发布

阅读量975

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45221036/article/details/115531279

版权

React Native

搭建开发环境

npm i -g react-native-cli 

react-native init demo01

react-native run-ios

获取屏幕宽度

import { 
Dimensions,
StatusBar,
SafeAreaView,
Text
} from 'react-native';
import React from 'react';

const App = () => React$Node = ()=>{
  return(
  <>
  	<StatusBar>  
  		<SafeAreaView>
  			<Text>
  				获取屏幕的宽度：{Dimensions.get('window').width + '\n'}
  				获取屏幕的高度：{Dimensions.get('window').height + '\n'}
  				获取屏幕的分辨率：{Dimensions.get('window').scale + '\n'}
  			</Text>
 		  </SafeAreaView>
 	 	</StatusBar>
  </>
  )
}

区分平台

import { Platform } from 'react-native'
import React form 'react'
const App = () => React$Node = ()=>{
  console.log(Platform.OS)// ios || android
  // 还有很多Platform的用法
  return(
  <>
  </>
  )
}

pod install问题

pod install --verbose --no-repo-update
# 被墙了，需要这样去安装
# 再修改GitHub的host
# https://juejin.cn/post/6844904193170341896

# Flipper的一个依赖有问题，更新到最新版本可解决 修改Podfile中的use_filpper那行，添加版本。https://github.com/reactnativecn/react-native-website/issues/370

clashX 设置sock5代理端口https://www.bokezhu.com/2021/03/04/731.html

git 配置socks代理https://blog.csdn.net/wuquan0625/article/details/47401235

使用ts模板项目

https://www.react-native.cn/docs/typescript#using-custom-path-aliases-with-typescript

npm install -g expo-cli
expo init MyTSProject

解决初始化TypeScript模板的RN项目报错问题：

1.删除旧版本 react-native-cli
 
npm uninstall -g react-native-cli
 
2.重新安装来自"react-native-community"的cli库 :
 
npm i -g @react-native-community/cli
 
3.重新初始化项目即可:
 
npx react-native init MyApp --template react-native-template-typescript