expo预览 native react
2018-10-24 09:14:21 u013702678 阅读数 92

Expo是一种很棒的方式,可以快速创建和使用您的本机应用程序。现在您也可以将Sentry与Expo一起使用,这是非常简单的待办事项:

npm i sentry-expo --save

在你的main.js或app.js中:

import Sentry from 'sentry-expo';
// import { SentrySeverity, SentryLog } from 'react-native-sentry';
Sentry.config('https://<key>@sentry.io/<project>').install();

 请注意,对于Expo,您必须使用公共DSN而不是私有DSN。这是因为Expo尚未使用本机集成,这可能会在未来版本中发生变化。

要上传源映射,您必须将其添加到exp.json或app.json

{
  // ... your existing exp.json configuration is here

  "hooks": {
    "postPublish": [
      {
        "file": "sentry-expo/upload-sourcemaps",
        "config": {
          "organization": "your team short name here",
          "project": "your project short name here",
          "authToken": "your auth token here"
        }
      }
    ]
  }
  // ...
}
2018-03-01 18:27:26 MrZZhou 阅读数 10574

一. 背景

react native官方现在推荐的项目构建方式是create-react-native-app,即简称CRNA,并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后,命令行输入npm start,随即会为开发者创建一个开发服务器,并打印出大大的二维码,使用expo扫码,即可预览项目,不过真的这么丝滑吗,使用中还是遇到了一些问题。

二. 踩坑记

手机和电脑均连接着同一WiFi热点,手机设备打开expo,扫描QR code,顺便吐槽下expo的扫码挺抽风的,有时候很快,有时候放弃用手输,然后界面中出现了

Something went wrong:couldn’t load exp://XXXXX network response timed out.

点击下方的view error log

uncaught error java.net.sockettimeoutexception:timedout

在网上查了下,GitHub上react相关项目中有不少issue说的就是这个问题(https://github.com/react-community/create-react-native-app/issues/270),就不卖关子了,这个问题的产生原因如错误提示,想必是和网络有关,有经验眼尖的同学就会发现run start后给出的手输访问地址,用的是以太网适配器的IP,而手机设备和电脑设备都是无线局域网连接,应该使用的是无线局域网IP,问题就是expo适配器默认选择的是以太网适配器,解决方法就是在explore手输你的无线局域网适配器IP加端口号。

本以为就可以享受丝滑了,但手输后又出现了如下报错:

20.0.0 is not a valid SDK version on Android only.后面是推荐使用啥啥啥版本的SDK

看到这个我还以为说的是Android SDK,然后在Android SDK manage中我并没有看到什么20.0.0的版本,也多安装了几个,但问题依旧,然后又去Google上搜寻了,遇到这个问题的人好像挺少的,GitHub上就看到一个相关的issue,里面提到的方法是卸载重装最新版,excuse me?还能有这种操作,服气。然后为了下到的是最新版,我就试图在expo官网上下载,expo的下载是链接到Google play上的,然后就屁颠屁颠下载了,手机上、模拟器上卸载重装了两次,发现还是一样的报错,只是20.0.0变成25.0.0,郁闷的是推荐版本中出现了20.0.0,这……就让我很郁闷这个SDK说的是啥了……

最后在stackoverflow上的一个问题中了解到,这个是expo自己的SDK,可以看看这个链接https://expo.io/tools#sdk,就是各种格式为XX.0.0 SDK版本,这应该是和不同rn版本之间有关联,所以才会有报错,我用的rn版本是0.52.0,(查看rn版本方法:react-native –version,前提是安装了react-native-cli)。所以根据expo SDK上的说明,我需要的SDK版本>=25.0.0,那么安装最新版理论上是能解决问题的,那么为什么却失败了呢?原来是expo上链到Google play的下载不是最新版的,这个真的坑,还是上面的链接,如下图,不要点击Android APP下载
下载位置
最后,搞定。

2018-03-28 14:20:13 qq_30211165 阅读数 1831

背景

react native官方现在推荐的项目构建方式是create-react-native-app,即简称CRNA,并且建议使用expo这个APP来实时查看效果。使用CRNA构建项目后,命令行输入npm start,随即会为开发者创建一个开发服务器,并打印出大大的二维码,使用expo扫码,即可预览项目,不过真的这么丝滑吗,使用中还是遇到了一些问题。

二. 踩坑记

手机和电脑均连接着同一WiFi热点,手机设备打开expo,扫描QR code,顺便吐槽下expo的扫码挺抽风的,有时候很快,有时候放弃用手输,然后界面中出现了

Something went wrong:couldn’t load exp://XXXXX network response timed out.

点击下方的view error log

uncaught error java.net.sockettimeoutexception:timedout

在网上查了下,GitHub上react相关项目中有不少issue说的就是这个问题(https://github.com/react-community/create-react-native-app/issues/270),就不卖关子了,这个问题的产生原因如错误提示,想必是和网络有关,有经验眼尖的同学就会发现run start后给出的手输访问地址,用的是以太网适配器的IP,而手机设备和电脑设备都是无线局域网连接,应该使用的是无线局域网IP,问题就是expo适配器默认选择的是以太网适配器,解决方法就是在explore手输你的无线局域网适配器IP加端口号。

本以为就可以享受丝滑了,但手输后又出现了如下报错:

20.0.0 is not a valid SDK version on Android only.后面是推荐使用啥啥啥版本的SDK

看到这个我还以为说的是Android SDK,然后在Android SDK manage中我并没有看到什么20.0.0的版本,也多安装了几个,但问题依旧,然后又去Google上搜寻了,遇到这个问题的人好像挺少的,GitHub上就看到一个相关的issue,里面提到的方法是卸载重装最新版,excuse me?还能有这种操作,服气。然后为了下到的是最新版,我就试图在expo官网上下载,expo的下载是链接到Google play上的,然后就屁颠屁颠下载了,手机上、模拟器上卸载重装了两次,发现还是一样的报错,只是20.0.0变成25.0.0,郁闷的是推荐版本中出现了20.0.0,这……就让我很郁闷这个SDK说的是啥了……

最后在stackoverflow上的一个问题中了解到,这个是expo自己的SDK,可以看看这个链接https://expo.io/tools#sdk,就是各种格式为XX.0.0 SDK版本,这应该是和不同rn版本之间有关联,所以才会有报错,我用的rn版本是0.52.0,(查看rn版本方法:react-native –version,前提是安装了react-native-cli)。所以根据expo SDK上的说明,我需要的SDK版本>=25.0.0,那么安装最新版理论上是能解决问题的,那么为什么却失败了呢?原来是expo上链到Google play的下载不是最新版的,这个真的坑,还是上面的链接,如下图,不要点击Android APP下载
下载位置

2017-05-20 11:34:00 weixin_34217711 阅读数 23

create-react-native-app,简称CRNA,用来快速创建react native的app。项目地址如下:
https://github.com/react-community/create-react-native-app

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

npm start命令能让你的 RN app 运行在开发模式中。你可以在你的 ios 或 android 手机中下载 expo 的 app,然后在 expo 中可以通过局域网实时查看 RN 应用!这中方法比模拟器方便许多,而且不需要连接电脑哟。你的团队成员都可以实时预览,非常方便。

expo的相关工具和预览app在这里
https://expo.io/

这里我们先不用XDE开发,原因是XDE很多强大的功能因为墙的原因很难用。
但是CRNA和Expo的Mobile Preview却是能用的。

安卓版:https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www
苹果版:https://itunes.apple.com/app/apple-store/id982107779?pt=17102800&ct=www&mt=8

我们进入CRNA创建的项目,npm start运行,可以看到出现一个硕大的二维码。

551828-1580261770a36419.png
Or enter this address in the Expo app's search bar:

  exp://192.168.1.100:19000

Your phone will need to be on the same local network as this computer.

For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

在expo中扫码即可加载运行,加载后会出现

11:26:57 AM: Finished building JavaScript bundle in 2344ms
11:26:58 AM: Running app on Asky iPhone
551828-b285ab1984945fc4.png

这是App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我们修改里面的字,实时保存,会看到Expo里的预览也会随之变化,非常方便。

可以通过摇晃手机唤出Expo的菜单,回到Expo主页,否则是无法退出预览app的。

下一课会讲解如何使用 React Native Elements 这个框架。

2019-01-11 07:31:31 qq_26744901 阅读数 89

在模拟器中

command+alt+I 打开开发人员工具,需要多按几次

command+R 重新加载并连接

没有更多推荐了,返回首页