因为涉及到的项目需要开发个手持设备的几个功能,目前花了一周配置好这两个环境,安卓真机器无法被识别到哈哈,
是用ws+as的虚拟机在开发,期间遇到很多不可思议的 颠覆性的问题?操作?‘
大佬不用看了。。。。。。。
React Native配置Po在这里
然后就是安装as,这里不建议使用as,很多前端都不提示,而且很多时候回给你错误的推荐,一点项目就完蛋!!!
推荐ws进行开发!!!!
没有as的可以去https://reactnative.cn/docs/getting-started/这里看怎么安装配置环境变量
安装好了,现在先int项目 react-native init MyApp (项目名字)
你可以使用–version参数(注意是两个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。我的版本是0.60.0
推荐安卓真机,启动命令:cd AwesomeProject react-native run-android
如果接下来程序运行无误,显示了React图片跟其他的英文,就是天胡开局(我自己整了好几天!!各种问题!!)
接续配置react-navigation(这是react-native搭配的跳转以及抽屉等)
1、先安装在React Native 项目中安装react-navigation这个包
yarn add react-navigation
2、然后,安装 react-native-gesture-handler。 如果你用Expo managed workflow,那可以省略这一步
yarn add react-native-gesture-handler
3、坑来了哈,让你react-native版本>=0.60 不用link包,但是你大于0.60版本的不link库还是白瞎
react-native link
直接输入这个命令,是依赖所有库,如果你接下来使用Ant Design Mobile RN的话,安装完毕
yarn add @ant-design/react-nati
会让你链接字体 图标 还是需要这个命令
不过一般安完React Native 你就会出现各种各样的错误,哪怕上传到git 重新拉下来项目 也会出错
我下载了好几个demo都没成功过。。。
反正我能运行成功是init了无数项目。。
期间遇到了–no-jetifier错误,是上一次init的项目能使用,下一次init的就出现这个错误,要把这个东西加在启动命令之后才可运行。
我反正用了一周,我想看看 有没有比我更长的。。。。。。。。。。
如果配置好了这两个RN 实例送给你
import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { StyleSheet,View, Text,Button,Image,TouchableHighlight} from 'react-native';
import Storage from "./Storage";
import Outbound from "./Outbound";
import Maintain from "./Maintain";
import ReportedStopping from "./ReportedStopping";
class HomeScreen extends React.Component {
render() {
return (
<View style={
{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text >HomeScreen</Text>
<Button
title="去下一页"
onPress={() => this.props.navigation.navigate('Details')}
/>
<Button
title="点击刷新"
onPress={() => this.props.navigation.push('Home')}
/>
</View>
);
}
}
});
/*下面几行代码才是实现连接跳转的关键,只需要注册即可实现跳转*/
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen,
},{
initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
/* 可以写在一起,也可分开写*/
class DetailsScreen extends React.Component {
render() {
return (
<View style={
{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text >Details Screen</Text>
<Button
title="去主页"
onPress={() => this.props.navigation.navigate('Home')}
/>
<Button
title="点击刷新"
onPress={() => this.props.navigation.push('Details')}
/>
</View>
);
}
}
Po上我的packge.json
{
"name": "reactApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@ant-design/react-native": "^3.1.10",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-gesture-handler": "^1.3.0",
"react-navigation": "^3.11.1"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.8.0",
"eslint": "^6.0.1",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.55.0",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
谢谢大家的观看,有问题请留言。或者加我wx16653144918