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 阅读数 10579

一. 背景

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 阅读数 1834

背景

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下载
下载位置

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

在模拟器中

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

command+R 重新加载并连接

2019-03-29 11:35:01 weixin_41640944 阅读数 48

说明:
Expo安装使用了yarn这个包管理器, 建议大家使用Expo-cli时, 第一时间调整yarn镜像源

1、查看一下当前源

	yarn config get registry

2、切换为淘宝源

	yarn config set registry https://registry.npm.taobao.org

Building a React Native App using Expo and Typescript (Part 1)

This is the first part of a two-part guide to how to create a React Native App using Expo and Typescript. Here, we’ll create an example RN app, starting with Expo’s create-react-native-app (CRNA), and configure it to develop our RN code and Jest unit tests using Typescript.

ur React Native project using CRNA

Install Expo’s create-react-native-app (CRNA) tool:

$ yarn global add create-react-native-app

Open Terminal, and cd to your working folder of choice. Run the command below to create a new React Native project:

create-react-native-app CRNAExpoTSExample

npx create-react-native-app project

At this command, CRNA will scaffold a very basic but ready-to-run React Native app for you. Once the app is created, cd to the created app’s project folder, and make sure the basic initial app scaffolded by CRNA is working:

cd CRNAExpoTSExample
yarn start

QR Code generated by running the yarn start command in Terminal

Open our example app on your mobile device

Download the Expo Client on your mobile phone (Android or iPhone). Open the Expo Client and select ‘Scan QR code’ option. Make sure your development machine and the mobile phone are on same WiFi network.

Scan the QR code above using your Expo Client (with version 26.0.0, Expo had to discontinue the QR scan feature on iPhone, you can still scan the QR code from iPhone’s camera and it will prompt you to open it using Expo app). Our app should now open on your phone:

Initial React-Native App as scaffolded by CRNA

Running Unit Tests

Also make sure the unit test scaffold by CRNA in the project folder is working by runningyarn test:

  1. Add Typescript

Install dependencies

Start with:

yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D

We’ll also need rimraf and concurrently to clean the output folder for ts-transpiled-to-js files and concurrently running npm scripts:

yarn add concurrently rimraf -D

For writing Jest unit tests in typescript we will need ts-jest. We’ll also install type defs for Jest and React test renderers:

yarn add ts-jest @types/jest @types/react-test-renderer -D

Configuration

Set up your Typescript config file (tsconfig.json) using the tsc command, or simply create the file manually within the project folder.

tsc --init

(If tsc command is failing for you, with an error like tsc command not found, check whether you have Typescript installed globally and /node/bin in your $PATH var — see https://stackoverflow.com/a/37092975 or https://stackoverflow.com/a/37117612 or https://stackoverflow.com/a/46222888) for more information.

tsconfig.json

Open the project in your code editor and update tsconfig.json to something like this:

(Note the settings rootDir and outDir (line #6-7) above.)

We’d like to store all our Typescript app code files in folders/subfolders under the src folder. With “rootDir”: “src , the Typescript compiler will look for all the .ts or .tsx files within thesrc folder and its subfolders.

“outDir”: “build” means Typescript will output the transpiled Javascript files under build folder.

Also note the “exclude” property above (lines 31–36): any JS files or folders that you want Typescript to ignore can be added here.

Add tslint.json

Add tslint.json file under the project folder copying its content from here.

Create src and build folders

Since we configured src and build as rootDir and outputDir in the tsconfig.json, create these folders under our project’s root folder.

When we created the project with the CRNA command (create-react-native-app CRNAExpoTSExample), it added an App.js and App.test.js under our project folder. Move these files to the src folder we created, then rename App.js and App.test.js to App.tsx and App.test.tsx respectively.

At this point, your project folder and files should look something like this:

Add a few more scripts in package.json

When we created the project above with our CRNA command, the package.json file it created in the scaffolded project folder contained these scripts:

...
"scripts": {
   "start": "react-native-scripts start",
   "eject": "react-native-scripts eject",
   "android": "react-native-scripts android",
   "ios": "react-native-scripts ios",
   "test": "node node_modules/jest/bin/jest.js"
}
...

Now, we’ll add few more scripts to run our tasks to compile Typescript, create the build and start our app:

We’ll add above scripts to our package.json’s scripts section. These are explained below:

The full package.json can be found here.

Adding App.js under project’s root folder

Notice that, in thepackage.json file that was originally created by CRNA, the “main” entry point for app is set to:

"main":"./node_modules/react-native-scripts/build/bin/crna-entry.js"

This means our app starts from this crna-entry.js file. Open this file, and you’ll find that it references our App.js file:

var _App = require('../../../../App');

This means it’s expecting the app module to be in theApp.js file under our project’s root folder. However, we moved the original App.js file to thesrcfolder. Furthermore, the Typescript compiler will output the transpiled ts-to-js file under the build folder.

So for CRNA to work with our changed folder structure and our Typescript configuration, let’s add an App.js file under the project folder that will simply export our App component in src/App.tsx, which the Typescript compiler will output to the build folder.

Create theApp.js file under the project’s root folder:

import App from './build/App';
export default App;

Add App.js to tsconfig.json’s exclude array

Add the App.js file we created above to tsconfig.json’s exclude array for Typescript to ignore this file.

  1. Run our app

We’re all set now to run our Typescript app. Run the command:

yarn run buildAndStart

This command runs the buildAndStart script we created in our package.jsonfile above: it’ll clean the build folder and output the transpiledTtypescript files to build folder, then start the project. As before, CRNA will generate a QR code on your terminal that you can scan from the Expo Client on your Android/iPhone, and you should see our app running on the device.

Make some changes to App.tsx to see how live reloading works to refresh the app on your device showing the latest changes. (Refreshing may take some time for the first time.)

(If you have git repository for the project folder, add /build to .gitignore, as we don’t need to push build files to git. Also add “build” to tsconfig.json’s exclude array for typescript to ignore the files under this folder.)

  1. Configure Jest unit tests to use Typescript

We installed ts-test package to allow us to write our Jest unit tests using Typescript.

Add a new file jest.config.js under the project folder:

In the testRegex setting above, we’re specifying that it should look for any file under test folder or any .test or .spec file under /src/ folder. We’ll put all our development source code under the src folder, and the spec/test file will go in the subfolders under src along with the resource/component.

Add jest.config.ts to tsconfig.json’s exclude array

Add jest.config.ts to tsconfig.json’s exclude array for Typescript to ignore this file.

Configure ts-jest to handle synthetic imports

CRNA uses synthetic default imports in the app component file it creates when scaffolding the project. Thus you’ll see React imported like below in App.tsx:

import React from 'react';

For ts-jest to handle synthetic default imports, make sure you have this configuration:

  1. In the tsconfig.json, make sure you have “allowSyntheticDefaultImports”: true under compilerOptions.

  2. Make sure you have transformer set to handle the transpiled jsx files with bable-test:

    module.exports = {
    “transform”: {
    “^.+\.jsx?&quot;:&quot;&lt;rootDir&gt;/nodemodules/babeljest&quot;,&quot;.+.tsx?&quot;: &quot;&lt;rootDir&gt;/node_modules/babel-jest&quot;, &quot;^.+\\.tsx?”: “ts-jest”
    },


    }

Running the unit test

Run the test and make sure its running as expected: yarn test.

👏 Yay!! We got Typescript configured for developing our Expo / React Native App and unit tests. Here’s the example code if you want to dig in to it.

In part two of this tutorial, we’ll create a very simple Header component and its unit test, and make sure everything works as expected with our Typescript configuration.

React Native组件

阅读数 78

React Native之组件

阅读数 44

React native 组件

阅读数 48

Reactnative组件

博文 来自: liyong014

React Native组件

阅读数 25

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