解决 react native 搭建沙箱环境报错问题

473 阅读2分钟

用沙盒环境开发

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里面的内容

截屏2022-11-11上午10.26.27.png

这个expo app也会跟着热更。

我是从微信的扫码工具扫码,然后跳过来这个expo app

10261668133659_.pic.jpg

由上图可知正在加载这个项目中

10271668133662_.pic.jpg

上图是说我是第一次打开这个项目会有这么一个提示。

接着就是项目的预览效果出来了。

10281668133670_.pic.jpg

接着比如需要在代码上添加一个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',
  },
});

10291668134223_.pic.jpg

10301668134225_.pic.jpg


总结:以上就是用沙盒去搭建react native开发环境的步骤。