用沙盒环境开发
node版本要12以上或者更高版本
1、先跑命令行 yarn global add expo-cli 安装这个脚手架之类的东西
2、再用第一步安装的脚手架安装react native项目 expo init AwesomeProject
3、进去主目录把项目跑起来
cd AwesomeProject
yarn start # 也可以用 expo start 这个命令,都可以
在第一步过程当中出现了
# yarn npm 报错: error An unexpected error occurred: “https://registry.npmjs.org/react: connect...
具体报错代码是
error An unexpected error occurred: "https://registry.npmjs.org/expo-cli: ETIMED OUT"
请求资源链接超时
解决的办法 就是 换源,换到国内的淘宝源
npm config set registry https://registry.npm.taobao.org
在第三步过程中
yarn start 直接就会出现一个二维码
提示
scan the qr code above with expo go (android) or the camera app (ios)
意思是说在你的手机设备上,无论是ios还是Android都要下载一个角 Expo go 这个app,然后如果是Android就是用这个应用的扫码工具来扫,如果是苹果就用其他有扫码能力的app来扫跳过去这个expo go的APP,就可以预览项目的开发内容了。
这个你改了app.js里面的内容
这个expo app也会跟着热更。
我是从微信的扫码工具扫码,然后跳过来这个expo app
由上图可知正在加载这个项目中
上图是说我是第一次打开这个项目会有这么一个提示。
接着就是项目的预览效果出来了。
接着比如需要在代码上添加一个button,点击可以弹出来提示:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Alert } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!!!</Text>
<Button
title="Learn More"
color="#841584"
onPress={() => Alert.alert('Button with adjusted color pressed')}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});