第一个 ReactNative 项目

react-native 和 webapp 有关系吗？https://www.jianshu.com/p/6c1986f54054

react-native 相关视频 https://v.youku.com/v_show/id_XMTgyNzM0NjQzMg==.html

es 6 标准 http://es6.ruanyifeng.com/#docs/intro

react 生命周期方法 https://reactjs.org/docs/react-component.html

初始化一个 ReactNative 项目，CMD 中执行命令

react-native init AwesomeProject

这里写图片描述

进入到项目中

cd AwesomeProject

用 Android Studio 新建一个空项目，将空项目中的 local.properties 文件拷贝到 react-native 项目下的 android 的文件夹（是用来指定 sdk 路径的）

运行项目

这里写图片描述

react-native run-android

确实如官方文档所述，出现了红屏报错

可是我用电脑控制手机的工具打开后，却变成了白屏，在手机上再次启动应用，也是白屏

找了好久、试了好多方法，然而并没有用，换成 SUMSUNG - N9200，Android 版本 7.0，运行就成功了，换成 SUMSUNG - Galaxy A7，Android 版本 6.0，一样成功，所以还是别纠结这个问题了，不会有结果的。
下面2点是网上给出的结论

1、adb启动的问题 换成5.0版本以上的模拟器就行了
2、Error: spawn cmd.exe ENOENT 错误是因为系统环境 PATH中少配了C:\windows\system32

在设备上运行的文档 https://reactnative.cn/docs/0.51/running-on-device-android.html#content

注意： adb devices 来查看连接的设备，如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保 adb devices 的输出只有一个是连接状态。

修改 App.js 的代码，看看有什么效果

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

修改根目录的 index.js文件

这里写图片描述

//import App from './App';
//修改为
import HelloWorld from './App';

//AppRegistry.registerComponent('HelloWorld', () => App);
//修改为
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

现在执行 react-native run-android 就不报错了

注意：
AppRegistry 模块是用来告知 React Native 哪一个组件被注册为整个应用的根容器，即主入口。一般在整个应用里 AppRegistry.registerComponent 这个方法只会调用一次。
如果在 index.js 中写了多个 AppRegistry.registerComponent，则以最后一个为准。

初看这段代码，可能觉得并不像JavaScript——没错，这是“未来”的JavaScript。首先你需要了解ES2015 （也叫作ES6）——这是一套对JavaScript的语法改进的官方标准（http://es6.ruanyifeng.com/#docs/intro），React Native内置了对ES2015标准的支持，你可以放心使用而无需担心兼容性问题。
上面的示例代码中的 import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。
这一行代码 Hello world!，叫做 JSX 语法——是一种在JavaScript中嵌入XML结构的语法，很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。

想开发Android版本，先连接你的设备或启动模拟器，然后在SampleAppMovies目录下运行react-native run-android，就会构建工程（注意在第一次构建中会联网下载很多依赖，耗时较长。在国内的话务必使用稳定的XX工具，否则会一直失败）并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。
当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的Menu键，或者在模拟器上按下F2或Page Up，Genymotion按下⌘+M)，然后在菜单中点击“Reload JS”。

继续…读下下面例子的代码和注释

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

/**
 * 导入组件
 */
import React, {
    Component 
} from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';

/**
 * 声明常量
 */
var MOCKED_MOVIES_DATA = [
  {title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

export default class HelloWorld extends Component {

  /**
   * 把模拟数据渲染出来
   */
  render() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Text>{movie.title}</Text>
        <Text>{movie.year}</Text>
        /**
         * Image 控件的 style 应该放在 source 前面，否则图片没显示出来，反正按照文档写的是没出来
         */
        <Image
            style={styles.thumbnail}
            source={{uri: movie.posters.thumbnail}}
        />
      </View>
    );
  }
}

/**
 * 设置样式
 */
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

运行效果图

这里写图片描述

第一个 ReactNative 项目

猜你喜欢