<< React Native 入门与实战>>----第1章 React Native简介-优快云博客

本文链接：https://blog.youkuaiyun.com/lijinhua7602/article/details/50959635

本文介绍了React Native的基础知识，包括环境搭建、React的主要特点和React Native的组件创建。强调了虚拟DOM的效率优势，JSX和ES6在开发中的作用，以及如何通过state更新视图。此外，还探讨了React Native的基本组件如Text、View，并提供了学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 环境搭建

 1.1.1 安装Node.js
     在浏览器中输入http://nodejs.org下载node-v4.4.pkg然后双击安装一路next,安装成功过后在terminal中输入node -v查看版本号
 1.1.2安装React Native
      安装Homebrew安装watchman和flow的命令如下:
       brew install watchman
       brew install flow
       npm install -g react-native-cli
       如果需要管理员权限添加sudo
       sudo npm install -g react-native-cli
       如果下载比较慢可以试这个 https://segmentfault.com/a/1190000002642514
  1.1.3使用NVM管理管理Node.js版本
  1.1.4 创建项目
      执行命令
         react-native init Hello
      如果比较慢可以用淘宝的连接或者下面的   https://segmentfault.com/a/1190000002642514
      这里也有react-native的配置:http://reactnative.cn/

1.2从React到React Native

    React Native是基于React设计的

1.2.1 React简单

  React是一个JavaScript的类库

React主要有如下3个特点:

作为UI:React可以只作为视图(View)在MVC中使用。
虚拟DOM:这是一个亮点，传统的是全部更新，React只更新不同的，高效
数据流(Data Flow): React支持单向数据流，相对于传统更加灵活

React有哪些需要我们掌握的也:

JSX语法知识:JSX语法类似于XML
ES6相关知识:因为ES6增加了很多语法特性，使用ES6更加快速地进行功能开发
前端基础知识:主要是css以及javascript

1、简单组件和数据传递

  我们可以使用this.props来做简单的数据传递

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
    <div id="example">

    </div>
    <script type="text/jsx">
        var HelloMessage = React.createClass({
            render: function() {
                return <h1>Hello {this.props.name}!</h1>;
            }
        });
        React.render(<HelloMessage name="React" />, document.getElementById('example'));

    </script>
</body>
</html>

   现在分析上面的代码，它主要做了两件事:

定义了一个组件HelloMessage,HelloMessages可以传入name属性，可以将内容用h1标签渲染。
使用React.render方法将组件渲染到id为example的div内，render方法有两个参数，第一个参数就是要渲染的组件内容，第二个就是要渲染到的目标节点。

入门点1：

调用 React.createClass() 来创建一个组件，组件名称（上例中的“HelloMessage”）第一个字母约定大写；

入门点2：

render()：通过 React.createClass() 创建的组件，必须包含一个render()方法，具体说明查看http://www.css88.com/react/docs/component-specs.html#render

入门点3：

定义完组件，需要调用React.render()方法，将ReactElement （组件）渲染到对应的DOM元素中(这里我们使用document.body)。

2.通过this.state更新视图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/jsx">
        var Timer = React.createClass({
            /*初始状态*/
            getInitialState: function() {
                return {secondsElapsed: 0};
            },
            tick: function() {
                this.setState({secondsElapsed: this.state.secondsElapsed + 1});
            },
            /*组件完成加载*/
            componentDidMount: function() {
                this.interval = setInterval(this.tick, 1000);
            },
            /*组件将被卸载*/
            componentWillUnmount: function() {
                clearInterval(this.interval);
            },
            render: function() {
                return (
                        <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
                );
            }
        });

        React.render(<Timer />, document.getElementById('example'));
    </script>
</body>
</html>

上面的代码在浏览器运行每隔一秒，secondsElapsed增加1，我们通过React.createClass创建了一个组件。

 其实，这里已经涉及一个组件的生命周期了，getinitialState是组件的初始状态，必须返回一个对象或者null对象，在getInitialState中，我们可以准备组件需要的数据以及后期需要更新的数据模型，也就是说getInitialState返回的对象是挂载在this.state上的，render方法的使用是渲染视图，这里render使用的数据是this.state,这样我们可以通过更新this.state来更新视图。componentDidMount是组件加载完成的状态，这里我们可以改变组件的状态(this.state)。

上面的代码中，componentDidMount设置了interval，每隔一秒钟，secondsElapsed加1，componentWillUnmount在组件将被卸载时调用，我们可以在componentWillUnmount里清除定时器this.interval

3、简单应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React第一个例子</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
    var ShowEditor = React.createClass({
        getInitialState: function() {
            return {value: '你可以在这里输入文字'};
        },
        handleChange: function() {
            this.setState({value: React.findDOMNode(this.refs.textarea).value});
        },
        render: function() {
            return (
                <div>
                    <h3>输入</h3>
                    <textarea style={{width:300, height:150, outline:'none'}}
                        onChange={this.handleChange}
                        ref="textarea"
                        defaultValue={this.state.value} />
                    <h3>输出</h3>
                    <div>
                        {this.state.value}
                    </div>
                </div>
            );
        }
    });
    React.render(<ShowEditor />, document.getElementById('example'));
</script>
</body>
</html>

现在我们来分析上面的代码，showEditor做了一件事，用户在textarea输入文字的同时，会在<div>中及时输出textarea中的文字，这里面有四个地方需要我们状态下。

可以通过state来修改视图的状态从而改变视图。
textarea上绑定了onChange的事件监听，基目的是通过setState改变this.state.value。
textarea添加了ref属性，这样我们就可以通过this.refs.textarea引用textarea对象了，
React提供了findDOMNode的方法，通过它可以找到React的DOM

1.2.2 React Navtive简介

 React Native采用的语法是React, 因此，只要基本掌握了React和jsX，同时补充相关平台(ios,android,web)的知识，就能开发Native应用和web应用了。

现在我们要创建React Native项目  命令行:react-native init demo 

然后我们使用xcode打开index.ios.js文件运行项目


'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} = React;

//var AppRegistry = React.AppRegistry;
//var StyleSheet = React.StyleSheet;
//var Text = React.Text;
//var View = React.View;
//var Image = React.Image;

var demo4 = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>欢迎来到React Native的世界</Text>
        <Image style={{width:50,height:50, resizeMode: Image.resizeMode.contain}}
               source={{uri:'https://facebook.github.io/react-native/img/header_logo.png'}}>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#05A5D1',
  },
  welcome: {
    fontSize: 20,
    color:'#fff'
  },
});

AppRegistry.registerComponent('demo4', () => demo4);

现在我们分析上面的代码，使用require引用react-native模块，然后定义了AppRegistry、StyleSheet、Text、View和Imaeg这5个对象，其实上面的var形式的对象也可能这样定义:
var AppRegistry = React.AppRegistry;
使用var {} = React的形式更为简洁,我们使用StyleSheet.create创建的是一个样式表的类，里面包含container和welcome这两个样式对象，引用使用style={对象}

1.4 如何学习React Native
React Native官网：http//facebook.github.io/react-native。
React Native版本发布:https://github.com/facebook/react-native/releases
React Native Github地址:https://github.com/facebook/react-native
问题搜索:https//github.com/facebook/react-native/issues。