• react-native-zyCountDown 用于react-native的计数组件,倒计时组件 封装的一个倒计时按钮,仅仅使用TouchableOpacity,View和Text. 安装 npm i react-native-zycountdown 或者 yarn add react-native-...

    react-native-zyCountDown

    用于react-native的计数组件,倒计时组件

    封装的一个倒计时按钮,仅仅使用TouchableOpacity,View和Text.

    安装

    npm i react-native-zycountdown

    或者

    yarn add react-native-zycountdown

    使用

    以下3个使用方式样式分别对应下面3张图片

    import CountDown from 'react-native-zycountdown';
    ...
    
    <CountDown
        onClick={() => {
        ToastAndroid.show('Start counting',ToastAndroid.SHORT);
        return true}}
    />
    
    <CountDown
        style={{backgroundColor: 'blue'}}
        textStyle={{color: 'yellow'}}
        count={10}
        title={'click to start'}
        frontText={'frontText:'}
        behindText={'behindText'}
        onClick={() => {
        ToastAndroid.show('Start counting',ToastAndroid.SHORT);
        return true}}
    />
    
    
    //下面这种写法,在点击方法内,我进行了逻辑判断,不符合逻辑的情况下不进行计时操作,返回false,
    <CountDown
      count={10}
      onClick={this._sendMessage}
      style={{backgroundColor: 'green', height: ScreenUtil.scaleSize(30)}}/>
    
    /**
     * 执行点击方法,并进行逻辑判断,满足条件开始计时
     */
     _sendMessage = () => {
            if (“不是手机号码“) {
            //条件不符,返回false 不开始计时
                ToastAndroid.show('手机号码格式不对', ToastAndroid.SHORT);
                return false; 
            }
            //条件符合开始计时:返回true 走下面发送验证码的方法并开始计时
            this._signInWithPhone();
            return true
     };         
    
     _signInWithPhone = async () => {...}

    这里写图片描述 这里写图片描述
    这里写图片描述

    属性:

    Prop Type Default Description
    style ViewPropTypes.style {alignItems: ‘center’,justifyContent: ‘center’,paddingHorizontal: 5,height: 40,backgroundColor:’green’} 组件的样式
    textStyle ViewPropTypes.style { color: ‘#fff’} 文字的样式
    onClick func - 点击组件时触发的方法,返回true则触发计数,返回false则不触发计数
    count number 60 初始数字
    title string send’ 未计时的时候显示的文字
    frontText string ‘等待’ 计数时数字左面的数字,用于计数时显示,可设为空字符串
    behindText string ‘秒’ 计数时数字右面的数字,用于计数时显示,可设为空字符串
    展开全文
  • react-native-rtmpview

    2020-07-12 23:30:07
    react native 播放视频直播库。。。可以直接运行example里的例子
  • 本文出自《React Native学习笔记》系列文章。 React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。 通过《React ...

    本文出自《React Native学习笔记》系列文章。

    React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,学起来比较枯燥。
    通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习,我将《React Native之React速学教程》分为三篇,大家可以根据需要进行阅读学习。

    概述

    本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。

    What’s React

    React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面。

    1. 当数据改变时,React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测,更容易调试。
    2. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的,而不是模板,所以你可以轻松地通过您的应用程序传递丰富的数据,并保持DOM状态。
    3. 一次学习随处可写,学习React,你不仅可以将它用于Web开发,也可以用于React Native来开发Android和iOS应用。

    不是模板却比模板更加灵活:

    Component

    心得:上图是GitHub Popular的首页截图,这个页面是通过不同的组件组装而成的,组件化的开发模式,使得代码在更大程度上的到复用,而且组件之间对的组装很灵活。

    Get Started

    使用React之前需要在页面引入如下js库 。

    • react.js
    • react-dom.js
    • browser.min.js

    上面一共列举了三个库: react.js 、react-dom.js 和 browser.min.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
    你可以从React官网下载这些库,也可以将其下载到本地去使用。

    心得:在做React Native开发时,这些库作为React Native核心库已经被初始化在node_modules目录下,所以不需要单独下载。

    使用React

    解压从上述地址下载的压缩包,在根目录中创建一个包含以下内容的 “helloworld.html” 。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

    在 JavaScript 代码里写着 XML 格式的代码称为 JSX,下文会介绍。为了把 JSX 转成标准的 JavaScript,我们用<script type="text/babel">标签,然后通过Babel转换成在浏览器中真正执行的内容。

    ReactDOM.render()

    ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
    

    上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。

    JSX

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
    每一个XML标签都会被JSX转换工具转换成纯JavaScript代码,使用JSX,组件的结构和组件之间的关系看上去更加清晰。
    JSX并不是React必须使用的,但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。

    Usage:

    React.render(//使用JSX
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    ); 
    React.render(//不使用JSX
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );
    

    HTML标签 与 React组件 对比

    React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
    要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。

    var myDivElement = <div className="foo" />;
    React.render(myDivElement, document.body);
    

    要渲染 React 组件,只需创建一个大写字母开头的本地变量。

    var MyComponent = React.createClass({/*...*/});
    var myElement = <MyComponent someProperty={true} />;
    React.render(myElement, document.body);
    

    提示:

    • React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
    • 由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代, React DOM 使用 className 和 htmlFor 来做对应的属性。

    JavaScript 表达式

    属性表达式

    要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 ({}) 包起来,不要用引号 ("")。

    // 输入 (JSX):
    var person = <Person name={window.isLoggedIn ? window.name : ''} />;
    // 输出 (JS):
    var person = React.createElement(
      Person,
      {name: window.isLoggedIn ? window.name : ''}
    );
    

    子节点表达式

    同样地,JavaScript 表达式可用于描述子结点:

    // 输入 (JSX):
    var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
    // 输出 (JS):
    var content = React.createElement(
      Container,
      null,
      window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
    );
    

    注释

    JSX 里添加注释很容易;它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)用 {} 包围要注释的部分。

    class ReactDemo extends Component {
      render() {
        return (     
          <View style={styles.container}>
            {/*标签子节点的注释*/}
            <Text style={styles.welcome}
              //textAlign='right'
              textShadowColor='yellow'
              /*color='red'
              textShadowRadius='1'*/
              >
              React Native!
            </Text>
          </View>
        );
      }
    }
    

    心得:在标签节点以外注释,和通常的注释是一样的,多行用“/**/” 单行用“//”;

    JSX延展属性

    不要试图去修改组件的属性

    不推荐做法:

      var component = <Component />;
      component.props.foo = x; // 不推荐
      component.props.bar = y; // 不推荐
    

    这样修改组件的属性,会导致React不会对组件的属性类型(propTypes)进行的检查。从而引发一些预料之外的问题。

    推荐做法:

    var component = <Component foo={x} bar={y} />;
    

    延展属性(Spread Attributes)

    你可以使用 JSX 的新特性 - 延展属性:

      var props = {};
      props.foo = x;
      props.bar = y;
      var component = <Component {...props} />;
    

    传入对象的属性会被复制到组件内。

    它能被多次使用,也可以和其它属性一起用。注意顺序很重要,后面的会覆盖掉前面的。

      var props = { foo: 'default' };
      var component = <Component {...props} foo={'override'} />;
      console.log(component.props.foo); // 'override'
    

    上文出现的… 标记被叫做延展操作符(spread operator)已经被 ES6 数组 支持。

    Component

    React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。

    var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello {this.props.name}</h1>;
      }
    });
    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    );
    

    上面代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage />时,会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。

    注意

    • 组件类的第一个字母必须大写。
    • 组件类只能包含一个顶层标签。

    组件的属性(props)

    我们可以通过this.props.xx的形式获取组件对象的属性,对象的属性可以任意定义,但要避免与JavaScript关键字冲突。

    遍历对象的属性:

    this.props.children会返回组件对象的所有属性。
    React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.mapReact.Children.forEach 来遍历子节点。
    React.Children.map

    array React.Children.map(object children, function fn [, object thisArg])
    

    该方法会返回一个array。
    React.Children.forEach

    React.Children.forEach(object children, function fn [, object thisArg])
    

    Usage:

    var NotesList = React.createClass({
      render: function() {
        return (
          <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
          </ol>
        );
      }
    });
    ReactDOM.render(
      <NotesList>
        <span>hello</span>
        <span>world</span>
      </NotesList>,
      document.body
    );
    

    PropTypes

    组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。
    组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求。

    var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });
    

    上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

    var data = 123;
    ReactDOM.render(
      <MyTitle title={data} />,
      document.body
    );
    

    这样一来,title属性就通不过验证了。控制台会显示一行错误信息。

    Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

    更多的PropTypes设置,可以查看官方文档
    此外,getDefaultProps 方法可以用来设置组件属性的默认值。

    var MyTitle = React.createClass({
      getDefaultProps : function () {
        return {
          title : 'Hello World'
        };
      },
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });
    ReactDOM.render(
      <MyTitle />,
      document.body
    );
    

    上面代码会输出"Hello World"

    ref 属性(获取真实的DOM节点)

    组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

    但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

    var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" 		  onClick={this.handleClick} />
          </div>
        );
      }
    });
    ReactDOM.render(
      <MyComponent />,
      document.getElementById('example')
    );
    

    上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
    需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
    React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档

    ref属性不只是string

    ref属性不仅接受string类型的参数,而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。

     render: function() {
        return (
          <TextInput
            ref={function(input) {
              if (input != null) {
                input.focus();
              }
            }} />
        );
      },
    

    在ES6中我们可以使用箭头函数来为组件的ref设置一个callback。

      render() {
        return <TextInput ref={(c) => this._input = c} />;
      },
      componentDidMount() {
        this._input.focus();
      },
    

    需要提醒大家的是,只有在组件的render方法被调用时,ref才会被调用,组件才会返回ref。如果你在调用this.refs.xx时render方法还没被调用,那么你得到的是undefined。

    心得:ref属性在开发中使用频率很高,使用它你可以获取到任何你想要获取的组件的对象,有个这个对象你就可以灵活地做很多事情,比如:读写对象的变量,甚至调用对象的函数。

    state

    上文讲到了props,因为每个组件只会根据props 渲染了自己一次,props 是不可变的。为了实现交互,可以使用组件的 state 。this.state 是组件私有的,可以通过getInitialState()方法初始化,通过调用 this.setState() 来改变它。当 state 更新之后,组件就会重新渲染自己。
    render() 方法依赖于 this.props 和 this.state ,框架会确保渲染出来的 UI 界面总是与输入( this.props 和 this.state )保持一致。

    初始化state

    通过getInitialState()方法初始化state,在组件的生命周期中仅执行一次,用于设置组件的初始化 state 。

     getInitialState:function(){
        return {favorite:false};
      }
    

    更新 state

    通过this.setState()方法来更新state,调用该方法后,React会重新渲染相关的UI。
    this.setState({favorite:!this.state.favorite});

    Usage:

    var FavoriteButton=React.createClass({
      getInitialState:function(){
        return {favorite:false};
      },
      handleClick:function(event){
        this.setState({favorite:!this.state.favorite});
      },
      render:function(){
        var text=this.state.favorite? 'favorite':'un favorite';
        return (
          <div type='button' onClick={this.handleClick}>
            You {text} this. Click to toggle.
          </div>
        );
      }
    });
    

    上面代码是一个 FavoriteButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    心得:由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

    本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解,让大家对组件(Component)有个更系统以及更深入的认识。

    组件的详细说明

    当通过调用 React.createClass() 来创建组件的时候,每个组件必须提供render方法,并且也可以包含其它的在这里描述的生命周期方法。

    render

    ReactComponent render()
    render() 方法是必须的。
    当该方法被回调的时候,会检测 this.propsthis.state,并返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件(比如 <div /> 或者 React.DOM.div()),也可以是自定义的复合组件。
    你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上,React 渲染一个<noscript>标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候,this.getDOMNode() 将返回 null

    注意:

    render()函数应该是纯粹的,也就是说该函数不修改组件的 state,每次调用都返回相同的结果,不读写 DOM 信息,也不和浏览器交互(例如通过使用 setTimeout)。如果需要和浏览器交互,在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。

    心得:不要在render()函数中做复杂的操作,更不要进行网络请求,数据库读写,I/O等操作。

    getInitialState

    object getInitialState()
    初始化组件状态,在组件挂载之前调用一次。返回值将会作为 this.state的初始值。

    心得:通常在该方法中对组件的状态进行初始化。

    getDefaultProps

    object getDefaultProps()
    设置组件属性的默认值,在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。
    Usage:

    getDefaultProps() {
        return {
          title: '',
          popEnabled:true
        };
      },
    

    注意
    该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

    心得:该方法在你封装一个自定义组件的时候经常用到,通常用于为组件初始化默认属性。

    PropTypes

    object propTypes
    propTypes 对象用于验证传入到组件的 props。 可参考可重用的组件

    Usage:

    var NavigationBar=React.createClass({
      propTypes: {
        navigator:React.PropTypes.object,
        leftButtonTitle: React.PropTypes.string,
        leftButtonIcon: Image.propTypes.source,
        popEnabled:React.PropTypes.bool,
        onLeftButtonClick: React.PropTypes.func,
        title:React.PropTypes.string,
        rightButtonTitle: React.PropTypes.string,
        rightButtonIcon:Image.propTypes.source,
        onRightButtonClick:React.PropTypes.func
      },
    

    心得:在封装组件时,对组件的属性通常会有类型限制,如:组件的背景图片,需要Image.propTypes.source类型,propTypes便可以帮你完成你需要的属性类型的检查。

    mixins

    array mixins
    mixin 数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息,可参考Reusable Components

    心得:由于ES6不再支持mixins,所以不建议在使用mixins,我们可以用另外一种方式来替代mixins,请参考:React Native之React速学教程(下)-ES6不再支持Mixins

    statics

    object statics
    statics 对象允许你定义静态的方法,这些静态的方法可以在组件类上调用。例如:

    var MyComponent = React.createClass({
      statics: {
        customMethod: function(foo) {
          return foo === 'bar';
        }
      },
      render: function() {
      }
    });
    MyComponent.customMethod('bar');  // true
    

    在这个块儿里面定义的方法都是静态的,你可以通过ClassName.funcationName的形式调用它。
    注意
    这些方法不能获取组件的 propsstate。如果你想在静态方法中检查 props 的值,在调用处把 props 作为参数传入到静态方法。

    displayName

    string displayName
    displayName 字符串用于输出调试信息。JSX 自动设置该值;可参考JSX in Depth

    isMounted

    boolean isMounted(),当组件被渲染到DOM,该方法返回true,否则返回false。该方法通常用于异步任务完成后修改state前的检查,以避免修改一个没有被渲染的组件的state。

    心得:开发中不建议大家isMounted,大家可以使用另外一种更好的方式来避免修改没有被渲染的DOM,请下文的isMounted 是个反模式

    组件的生命周期(Component Lifecycle)

    在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法,在Android中Activity则提供了onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生。

    那么在React 中组件(Component)也是有自己的生命周期方法的。

    component-lifecycle

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM
    • Updating:正在被重新渲染
    • Unmounting:已移出真实 DOM

    心得:你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中UIViewController的生命周期方法很像,React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。

    Mounting(装载)

    • getInitialState(): 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
    • componentWillMount():服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。
    • componentDidMount():在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

    Updating (更新)

    • componentWillReceiveProps(object nextProps) 在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。

    用此函数可以作为 react 在 prop 传入之后, render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

    • shouldComponentUpdate(object nextProps, object nextState): 在接收到新的 props 或者 state,将要渲染之前调用。

    该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false。

    心得:重写次方你可以根据实际情况,来灵活的控制组件当 props 和 state 发生变化时是否要重新渲染组件。

    • componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻调用。

    在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。

    注意:你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps

    • componentDidUpdate(object prevProps, object prevState): 在组件的更新已经同步到 DOM 中之后立刻被调用。

    该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

    Unmounting(移除)

    • componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。

    在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

    isMounted是个反模式

    isMounted通常用于避免修改一个已经被卸载的组件的状态,因为调用一个没有被装载的组件的setState()方法,系统会抛出异常警告。

    if(this.isMounted()) { //不推荐
      this.setState({...});
    }
    

    上面做法有点反模式,isMounted()起到作用的时候也就是组件被卸载之后还有异步操作在进行的时候,这就意味着一个被销毁的组件还持有着一些资源的引用,这会导致系统性能降低甚至内存溢出。

    React 在设计的时候通过setState()被调用时做了一些检查,来帮助开发者发现被卸载的组件还持有一些资源的引用的情况。如何你使用了isMounted(),也就是跳过的React的检查,也就无法发现被卸载的组件还持有资源的问题。

    既然isMounted()是反模式,那么有没有可替代方案呢?
    我们可以通过在设置一个变量来表示组件的装载和卸载的状态,当componentDidMount被调用时该变量为true,当
    componentWillUnmount被调用时,该变量为false,这样该变量就可以当isMounted()来使用。但还不够,到目前为止,我们只是通过变量来替代isMounted(),还没有做任何的优化,接下来我们需要在componentWillUnmount被调用时取消所有的异步回调,主动释放所有资源,这样就能避免被卸载的组件还持有资源的引用的情况,从而减少了内存溢出等情况的发生。

    class MyComponent extends React.Component {
      componentDidMount() {
        mydatastore.subscribe(this);
      }
      render() {
        ...
      }
      componentWillUnmount() {
        mydatastore.unsubscribe(this);
      }
    }
    

    使用可取消的Promise做异步操作。

    const cancelablePromise = makeCancelable(
      new Promise(r => component.setState({...}}))
    );
    cancelablePromise
      .promise
      .then(() => console.log('resolved'))
      .catch((reason) => console.log('isCanceled', reason.isCanceled));
    cancelablePromise.cancel(); // Cancel the promise
    

    可取消的Promise。

    const makeCancelable = (promise) => {
      let hasCanceled_ = false;
      const wrappedPromise = new Promise((resolve, reject) => {
        promise.then((val) =>
          hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
        );
        promise.catch((error) =>
          hasCanceled_ ? reject({isCanceled: true}) : reject(error)
        );
      });
      return {
        promise: wrappedPromise,
        cancel() {
          hasCanceled_ = true;
        },
      };
    };
    

    本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。

    ES6的特性

    何为ES6?

    ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。

    下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。

    1.类(class)

    对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。

      class Animal {
        // 构造方法,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数.
        constructor(name,color) {
          this.name = name;
          this.color = color;
        }
        // toString 是原型对象上的属性
        toString() {
          console.log('name:' + this.name + ',color:' + this.color);
    
        }
      }
       
     var animal = new Animal('dog','white');//实例化Animal
     animal.toString();
    
     console.log(animal.hasOwnProperty('name')); //true
     console.log(animal.hasOwnProperty('toString')); // false
     console.log(animal.__proto__.hasOwnProperty('toString')); // true
    
     class Cat extends Animal {
      constructor(action) {
        // 子类必须要在constructor中指定super 方法,否则在新建实例的时候会报错.
        // 如果没有置顶consructor,默认带super方法的constructor将会被添加、
        super('cat','white');
        this.action = action;
      }
      toString() {
        console.log(super.toString());
      }
     }
    
     var cat = new Cat('catch')
     cat.toString();
     
     // 实例cat 是 Cat 和 Animal 的实例,和Es5完全一致。
     console.log(cat instanceof Cat); // true
     console.log(cat instanceof Animal); // true
    

    2.模块(Module)

    ES5不支持原生的模块化,在ES6中,模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。

    导出(export)

    ES6允许在一个模块中使用export来导出多个变量或方法。

    导出变量

    //test.js
    export var name = 'Rainbow'
    

    心得:ES6不仅支持变量的导出,也支持常量的导出。 export const sqrt = Math.sqrt;//导出常量

    ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

     //test.js
     var name = 'Rainbow';
     var age = '24';
     export {name, age};
    

    导出函数

    // myModule.js
    export function myModule(someArg) {
      return someArg;
    }  
    

    导入(import)

    定义好模块的输出以后就可以在另外一个模块通过import引用。

    import {myModule} from 'myModule';// main.js
    import {name,age} from 'test';// test.js
    

    心得:一条import 语句可以同时导入默认方法和其它变量。import defaultMethod, { otherMethod } from 'xxx.js';

    3.箭头(Arrow)函数

    这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。

    箭头函数的结构

    箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

    // 箭头函数的例子
    ()=>1
    v=>v+1
    (a,b)=>a+b
    ()=>{
        alert("foo");
    }
    e=>{
        if (e == 0){
            return 0;
        }
        return 1000/e;
    }
    

    心得:不论是箭头函数还是bind,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。

    卸载监听器时的陷阱

    错误的做法

    class PauseMenu extends React.Component{
        componentWillMount(){
            AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
        }
        componentWillUnmount(){
            AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
        }
        onAppPaused(event){
        }
    }
    

    正确的做法

    class PauseMenu extends React.Component{
        constructor(props){
            super(props);
            this._onAppPaused = this.onAppPaused.bind(this);
        }
        componentWillMount(){
            AppStateIOS.addEventListener('change', this._onAppPaused);
        }
        componentWillUnmount(){
            AppStateIOS.removeEventListener('change', this._onAppPaused);
        }
        onAppPaused(event){
        }
    }
    

    除上述的做法外,我们还可以这样做:

    class PauseMenu extends React.Component{
        componentWillMount(){
            AppStateIOS.addEventListener('change', this.onAppPaused);
        }
        componentWillUnmount(){
            AppStateIOS.removeEventListener('change', this.onAppPaused);
        }
        onAppPaused = (event) => {
            //把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
        }
    }
    

    需要注意的是:不论是bind还是箭头函数,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。

    4.ES6不再支持Mixins

    在ES5下,我们经常使用mixin来为组件添加一些新的方法,如:

    var SetIntervalMixin = {
      componentWillMount: function() {
        this.intervals = [];
      },
      setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
      },
      componentWillUnmount: function() {
        this.intervals.forEach(clearInterval);
      }
    };
    var TickTock = React.createClass({
      mixins: [SetIntervalMixin], // Use the mixin
      getInitialState: function() {
        return {seconds: 0};
      },
      ...
    

    但,很不幸的是,ES6不支持使用Mixins了,不过我们可以使用,增强组件来替代Mixins。

    //Enhance.js
    import { Component } from "React";
    
    export var Enhance = ComposedComponent => class extends Component {
        constructor() {
            this.state = { data: null };
        }
        componentDidMount() {
            this.setState({ data: 'Hello' });
        }
        render() {
            return <ComposedComponent {...this.props} data={this.state.data} />;
        }
    };
    //HigherOrderComponent.js
    import { Enhance } from "./Enhance";
    
    class MyComponent {
        render() {
            if (!this.data) return <div>Waiting...</div>;
            return <div>{this.data}</div>;
        }
    }
    
    export default Enhance(MyComponent); // Enhanced component
    

    用一个“增强组件”,来为某个类增加一些方法,并且返回一个新类,这无疑能实现mixin所实现的大部分需求。

    另外,网上也有很多其他的方案,如react-mixin

    5.ES6不再有自动绑定

    在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但在ES6中没有了自动绑定,也就是说,你需要通过bind或者箭头函数来手动绑定this引用。

    // 通过使用 bind() 来绑定`this`
    <div onClick={this.tick.bind(this)}>
    // 也可通过使用箭头函数来实现
    <div onClick={() => this.tick()}>  
    

    心得: 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用,所以,推荐大家在组件的构造函数中来绑定this

    constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
    this.tick = this.tick.bind(this);//在构造函数中绑定this
    }
    // 使用

    ```

    6.static关键字

    在ES6中我们可以通过static关键字来定义一个类函数。

    class People {
        constructor(name) { //构造函数
              this.name = name;
        }
        sayName() {
              console.log(this.name);
        }
        static formatName(name) //将formatName定义为类方法
            return name[0].toUpperCase() + name.sustr(1).toLowerCase();
        }
    }
    
    console.log(People.formatName("tom")); //使用类方法formatName
    

    ES6 VS ES5(ES6与ES5的区别)

    新版本的React /React Native使用了ES6标准,下面就让我们一起了解一下基于ES6的React/React Native相比ES5有哪些不同。

    心得:很多React/React Native的初学者经常会被ES6问题迷惑:官方建议我们ES6,但是网上搜到的很多教程和例子都是基于ES5版本的,所以很多人感觉无法下手,下面就让我们一起认识ES6与ES5在React/React Native开发上有哪些不同和需要注意的地方。

    下面是我们需要知道的ES6与ES5在4大方面上的区别。

    1.在定义方面的不同

    在定义组件,方法,属性等方面,ES6与ES5是有所不同的,下面就让我们一起看一下有哪些不同。

    心得:因为向下兼容的原因,你在开发过程中可使用ES6也可以使用ES5的规范,但为了代码的风格一致性,建议尽量减少混写。

    定义组件

    ES5

    在ES5里,通常通过React.createClass来定义一个组件类,像这样:

    var Photo = React.createClass({
        render: function() {
            return (
                <Image source={this.props.source} />
            );
        },
    });
    

    ES6

    在ES6里,我们通过继承React.Component 来定义一个组件类,像这样:

    class Photo extends React.Component {
        render() {
            return (
                <Image source={this.props.source} />
            );
        }
    }
    

    定义方法

    相比ES5,ES6在方法定义上语法更加简洁,从上面的例子里可以看到,给组件定义方法不再用 名字: function()的写法,而是直接用名字(),在方法的最后也不能有逗号了。

    ES5

    var Photo = React.createClass({
        test: function(){
        },
        render: function() {
            return (
                <Image source={this.props.source} />
            );
        },
    });
    

    ES6

    class Photo extends React.Component {
        test() {
        }
        render() {
            return (
                <Image source={this.props.source} />
            );
        }
    }
    

    定义组件的属性类型和默认属性

    ES5

    在ES5里,属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现。

    var Video = React.createClass({
        getDefaultProps: function() {
            return {
                autoPlay: false,
                maxLoops: 10,
            };
        },
        propTypes: {
            autoPlay: React.PropTypes.bool.isRequired,
            maxLoops: React.PropTypes.number.isRequired,
            posterFrameSrc: React.PropTypes.string.isRequired,
            videoSrc: React.PropTypes.string.isRequired,
        },
        render: function() {
            return (
                <View />
            );
        },
    });
    

    ES6

    在ES6里,可以统一使用static成员来实现。

    class Video extends React.Component {
        static defaultProps = {
            autoPlay: false,
            maxLoops: 10,
        };  // 注意这里有分号
        static propTypes = {
            autoPlay: React.PropTypes.bool.isRequired,
            maxLoops: React.PropTypes.number.isRequired,
            posterFrameSrc: React.PropTypes.string.isRequired,
            videoSrc: React.PropTypes.string.isRequired,
        };  // 注意这里有分号
        render() {
            return (
                <View />
            );
        } // 注意这里既没有分号也没有逗号
    }
    

    也有人这么写,虽然不推荐,但读到代码的时候你应当能明白它的意思:

    class Video extends React.Component {
        render() {
            return (
                <View />
            );
        }
    }
    Video.defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };
    Video.propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };
    

    心得:对React开发者而言,static在一些老版本的浏览器上是不支持的。React Native开发者可以不用担心这个问题。

    2.在导入(import)与导出(export)组件上的不同

    导入组件

    ES5

    在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:

    var React = require("react");
    var {
        Component,
        PropTypes
    } = React;  //引用React抽象组件
    
    var ReactNative = require("react-native");
    var {
        Image,
        Text,
    } = ReactNative;  //引用具体的React Native组件
    
    var AboutPage=require('./app/AboutPage') //引入app目录下AboutPage组件,即AboutPag.js
    var PopularPage=require('./app/PopularPage') //引入app目录下PopularPage组件,即PopularPage.js
    var FavoritePage=require('./app/FavoritePage') //引入app目录下FavoritePage组件,即FavoritePage.js
    

    ES6

    在ES6里,没有了require,而是使用import来导入组件,有点像Java的写法。

    import React, { 
        Component,
        PropTypes,
    } from 'react';//引用React抽象组件
    
    import {
        Image,
        Text
    } from 'react-native' //引用具体的React Native组件
    
    import AboutPage from './app/AboutPage' //引入app目录下AboutPage组件,即AboutPag.js
    import PopularPage from './app/PopularPage' //引入app目录下PopularPage组件,即PopularPage.js
    import FavoritePage  from './app/FavoritePage' //引入app目录下FavoritePage组件,即FavoritePage.js
    

    另外,ES6支持将组件导入作为一个对象,使用“ * as”修饰即可。

    //引入app目录下AboutPage组件作为一个对象,接下来就可使用“AboutPage.”来调用AboutPage的方法及属性了。  
    import  * as AboutPage from './app/AboutPage' 
    

    心得:使用“ * as ”修饰后,导入的组件直接被实例化成一个对象,可以使用“.”语法来调用组件的方法和属性,和没有“ * as ”修饰是有本质区别的,使用的时候要特别注意。

    导出组件

    ES5
    在ES5里,要导出一个类给别的模块用,一般通过module.exports来导出:

    var MyComponent = React.createClass({
        ...
    });
    module.exports = MyComponent;
    

    ES6
    在ES6里,通常用export default来实现相同的功能:

    export default class MyComponent extends Component{
        ...
    }
    

    3.在初始化state上的不同

    ES5

    var Video = React.createClass({
        getInitialState: function() {
            return {
                loopsRemaining: this.props.maxLoops,
            };
        },
    })
    

    ES6
    ES6下,有两种写法:

    class Video extends React.Component {
        state = {
            loopsRemaining: this.props.maxLoops,
        }
    }
    

    不过我们推荐更易理解的在构造函数中初始化(这样你还可以根据需要做一些计算):

    class Video extends React.Component {
        constructor(props){
            super(props);
            this.state = {
                loopsRemaining: this.props.maxLoops,
            };
        }
    }
    

    4.在方法作为回调上的不同

    在开发工作中,经常会使用到回调,如按钮的单击回调等,这也是在很多编程语言中都会经常出现的情况。ES6与ES5在使用回调方面是有区别的。

    ES5

    var PostInfo = React.createClass({
        handleOptionsButtonClick: function(e) {
            // Here, 'this' refers to the component instance.
            this.setState({showOptionsModal: true});
        },
        render: function(){
            return (
                <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                    <Text>{this.props.label}</Text>
                </TouchableHighlight>
            )
        },
    });
    

    在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。

    在ES6下,你需要通过bind来绑定this引用,或者使用箭头函数(它会绑定当前scope的this引用):

    ES6

    class PostInfo extends React.Component{
        handleOptionsButtonClick(e){
            this.setState({showOptionsModal: true});
        }
        render(){
            return (
                <TouchableHighlight 
                    onPress={this.handleOptionsButtonClick.bind(this)}
                    //onPress={e=>this.handleOptionsButtonClick(e)}//这种方式和上面的效果是一样的
                    >
                    <Text>{this.props.label}</Text>
                </TouchableHighlight>
            )
        },·
    }
    

    参考

    React’s official site
    React on ES6+

    About

    本文出自《React Native学习笔记》系列文章。
    了解更多,可以关注我的GitHub
    @http://jiapenghui.com

    推荐阅读

    展开全文
  • Facebook开源React Native也势要统一移动端编程语言,而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《Reac

    原文地址:

    http://www.csdn.net/article/2015-09-24/2825787-react-native

    Facebook开源React Native也势要统一移动端编程语言,而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题,将在大会上深度分享React Native 下的 Android 开发,先行撰文对React Native进行实战,本文为第一篇。 

     

    图:阿里巴巴工程师 廖祜秋 

    以下为正文:

    2015 年 9 月 15 号,React Native for Android 发布。至此,React 基本完成了对多端的支持。基于 React / React Native 可以:

    • HTML5、Android、iOS 多端代码复用;
    • 实时热部署。

    在接下来的时间,我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。(注:本篇文章 iOS 和 Android 开发都适用。)

    目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学,应该都是 Mac (除了听说网易有些部门写 iOS 给黑苹果之外,哈哈哈哈)。 开发 Android 的同学, 如果公司配发的不是 Mac 的话,建议自己入手一个,能显著提高生产力,就当投资自己吧。我大阿里对 Android 开发也是不给 Mac 的(不知道公司什么思路,现在倒是可以申请 Mac air了,air的性能……),所以我也是自己买的。

    环境配置

    需要安装的有:

    Homebrew

    Homebrew 是 Mac 中的一个包管理器。没有安装的话,点击 这里安装,我的版本如下:

    mac-2:~ srain$ brew -v
    Homebrew 0.9.5 (git revision ac9a7; last commit 2015-09-21)

    版本过低将会导致无法安装后续几个组件。可用 brew update 升级。

    Node.js 和 npm

    Node.js 需要 4.0 及其以上版本。安装好之后,npm 也有了。

    • 通过 nvm 安装 Node.js

    nvm 是 Node.js 的版本管理器,可以轻松安装各个版本的 Node.js 版本。

    安装 nvm 可以通过 Homebrew 安装:

    brew install nvm

    或者按照 这里的方法安装。

    然后安装 Node.js:

    nvm install node && nvm alias default node

    也可以直接下载安装 Node.js: https://nodejs.org/en/download/

    安装好之后,如下:

    mac-2:react-native srain$ node -v
    v4.0.0
    mac-2:react-native srain$ npm -v
    2.14.2

    安装 watchman 和 flow

    这两个包分别是监控文件变化和类型检查的。安装如下:

    brew install watchman
    brew install flow

    安装 React-Native

    通过 npm安装即可:

    npm install -g react-native-cli

    App开发环境的设置

    iOS

    XCode 6.3 及其以上即可。

    Android

    这个比较麻烦。

    • 设置环境变量:ANDROID_HOME

    export ANDROID_HOME=/usr/local/opt/android-sdk

    • SDK Manager 安装以下包:
    1. Android SDK Build-tools version 23.0.1
    2. Android 6.0 (API 23)
    3. Android Support Repository

    初始化一个项目

    文档提到:

    react-native init AwesomeProject

    初始化一个项目,其中 AwesomeProject 是项目名字,这个随意。等待一段时间之后(具体视网络情况而定),项目初始化完成。

    进入到项目目录:

    cd AwesomeProject
    mac-2:AwesomeProject srain$ ls -l
    total 24
    drwxr-xr-x  14 srain  staff   476 Sep 21 09:52 android
    -rw-r--r--   1 srain  staff  1023 Sep 21 11:47 index.android.js
    -rw-r--r--   1 srain  staff  1065 Sep 20 11:58 index.ios.js
    drwxr-xr-x   6 srain  staff   204 Sep 20 11:58 ios
    drwxr-xr-x   5 srain  staff   170 Sep 21 10:31 node_modules
    -rw-r--r--   1 srain  staff   209 Sep 20 11:58 package.json

    其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的 js 文件。

    运行项目

    不管是 iOS 还是 Android,在开发调试阶段,都需要在 Mac 上启动一个 HTTP 服务,称为“Debug Server”,默认运行在 8081 端口,APP 通 Debug Server 加载 js。

    iOS 和 Android 的模拟器,连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试,就稍微麻烦一些了。

    iOS

    还是非常简单,XCode 打开项目,点击运行就好。修改 index.ios.js, 在模拟器中 ⌘ + R 重新载入 js 即可看到相应的变化。

    iOS 真机调试也简单,修改HTTP地址即可。

    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

    Android

    按照官方文档,需要一个模拟器(Genymotion模拟器也可以)。但是不像 iOS,Android 开发平时更多是直接用真机进行开发和调试,如何运行部署到真机,下面会提到。

    运行命令:

    react-native run-android

    然后就会部署到模拟器,修改 index.android.js ,调出模拟器菜单键,选择重新载入 js 即可看到变化。

    Android 真机调试

    示例 App 直接部署到真机,红色界面报错,无法连接到 Debug Server。

    如果是 5.0 或者以上机型,可通过 adb 反向代理端口,将 Mac 端口反向代理到测试机上。

    adb reverse tcp:8081 tcp:8081

    如果 5.0 以下机器,应用安装到测试机上之后,摇动设备,在弹出菜单中选择 Dev Setting > Debug Server host for device,然后填入 Mac 的 IP 地址(ifconfig 命令可查看本机 IP)

    关于修改 DevHelper 来进行和 iOS 一样的开发调试,后续关于热部署时,我会介绍到。 

    在 Android Studio 中调试开发

    我们可能希望在 Android Studio 打开项目,然后编译部署到真机。

    这个时候,在命令行启动 Debug Server 即可:

    react-native start

    结论和后续

    本篇文章,iOS 和 Android 都适用。至此,环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍:

    • 重点介绍 Android 相关的开发:包括组件,源码分析等;
    • 动态热部署;
    • 多端代码复用。

    参考文档

    官方文档:https://facebook.github.io/react-native/docs/getting-started.html#content

    时间仓促,水平有限,如有谬误,还请纠正,原始文档在这里

    展开全文
  • 刚开始接触React Native开发的程序猿可能会拿着网上的例子和文档一头雾水,毕竟不是像C语言有个main、Android有个OnCreate,iOS有个ViewDidLoad那样,加上JavaScript语法的随意性,让很多人无从下手,本文主要介绍...

    刚开始接触React Native开发的程序猿可能会拿着网上的例子和文档一头雾水,毕竟不是像C语言有个main、Android有个OnCreate,iOS有个ViewDidLoad那样,加上JavaScript语法的随意性,让很多人无从下手,本文主要介绍React Native组件的结构和生命周期,帮助读者理解一个React Native组件如何进行展示,如何进行开发。


    1.组件的构成

    在React Native项目中,所有展示的界面,都可以看做是一个组件(Component)只是功能和逻辑上的复杂程度不同。每一个是许许多多小的组件拼成的,每个小的组件也有自己对应的逻辑,不过他们都遵循同样的代码结构,由以下几个部分组成

    第一是包和其他组件引用部分,如下图:


    新版本的React Native已经变成了如下形式:


    此部分首先会利用Node.js的require机制引入react-native这个包,接着会在var { } = React;的代码结构中引用来自React Native官方的组件(其中AppRegistry和StyleSheet比较重要)、API以及第三方或开发者项目中构建的组件,形式为该组件或API的React类名,当然,由于React Native利用了Node.js实现,还可以使用require引入其他可用的Node.js包,如:jssha(一个js哈希算法包),以供后面的代码进行使用。

    第二部分是组件类的声明,如图:


    新版形式:


    此部分用于构造组件的状态和具体的展示结构,利用React.createClass()来实例化一个React Native组件对象,其中会包含组件的几个重要的生命周期(下文会讲到),其中render属性对应的函数会返回一段JSX来表示该组件的结构和布局。该部分是一个组件必不可少的地方,没有这些内容,就无法构成一个组件。

    第三部分是该组件的样式声明,如图:


    新版形式:


    该部分使用StyleSheet.create来实例化样式对象,其中的内容为JSON形式的React Native样式,该样式来源于CSS3,并将其字段规范为标准的首字母小写驼峰式命名,这些声明的样式可供开发者在构建组件的展示时(JSX代码中)进行使用(直接写入JSX也可,但影响可读性)。


    2.生命周期

    一个React Native组件的生命周期分为实例化、存在期和销毁期,其中最常用的为实例化期,该时期即组件的构建、展示时期,需要开发者根据几个函数的调用过程,控制好组件的展示和逻辑的处理。

    (1)实例化期分为5个阶段,每个阶段以一个函数来进行控制,具体如下:


    getDefaultProps:顾名思义,这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。

    getInitialState:这里是对控件的一些状态进行初始化,由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值,修改方式如下:

    [javascript] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. function() {  
    2.     this.setState({  
    3.         showText: 'Hello'  
    4.     });  
    5. }  
    值得注意的是,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染,不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染。

    componentWillMount:可以通过字面意思看出,这个方法被调用时期是组件将要被加载在视图上之前,功能比较少,即:render一个组件前最后一次修改state的机会。

    render:上面已经说过render是一个组件必须有的方法,形式为一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局、WPF的XAML布局类似,只能返回一个顶级元素,即:

    同时,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值。

    componentDidMount:即调用了render方法后,组件加载成功并被成功渲染出来以后所执行的hook函数,一般会将网络请求等加载数据的操作,放在这个函数里进行,来保证不会出现UI上的错误,如图所示,_fetchData利用了fetch API来异步请求Web API来加载商品数据:


    (2)存在期主要是用来处理与用户的交互,如:点击事件,都比较简单,也不是很常用,具体有以下几个过程:

    componentWillReceiveProps:指父元素对组件的props或state进行了修改

    shouldComponentUpdate:一般用于优化,可以返回false或true来控制是否进行渲染

    componentWillUpdate:组件刷新前调用,类似componentWillMount

    componentDidUpdate:更新后的hook

    (3)销毁期,用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount


    3.总结


    总得来讲,React Native组件的生命周期,经历了Mount->Update->Unmount这三个大的过程,即从创建到销毁的过程,如果借助Android和iOS的开发思想,那么React Native组件的生命周期就更容易理解了。那么,我们构建一个React Native控件也就能够知道如何下手,如何控制和优化。经过一层一层的封装和调用,一个完整的React Native应用也就构建出来了。


    转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50470171


    展开全文
  • 最近需要一个轮播的功能,查看了其他的轮播组件,好像都不满足需求 ...import React, {Component} from 'react'; import { AppRegistry, StyleSheet, ScrollView, Image, Text, View } from 'react-na...

    最近需要一个轮播的功能,查看了其他的轮播组件,好像都不满足需求

    需要的效果如下

     

    直接上代码了

    import React, {Component} from 'react';
    import {
        AppRegistry,
        StyleSheet,
        ScrollView,
        Image,
        Text,
        View
    } from 'react-native';
    //Dimensions进行获取屏幕宽度和高度信息
    let Dimensions = require('Dimensions');
    let ScreenWidth = Dimensions.get('window').width;
    let ScreenHeight = Dimensions.get('window').height;
    
    
    export default class BasePicPlay extends Component {
    
        constructor(props) {
            super(props);
            this.state = {
                currentPage: 1,
            };
        }
    
        static defaultProps = {
            duration: 5000,
            ImageData:[
                    //  {icon:'http://47.107.43.175:3005/files/1557198773629.jpg'},
                    // {icon:'http://47.107.43.175:3005/files/1557198732379.jpg'},
                    // {icon:'http://47.107.43.175:3005/files/1557198788379.jpg'},
                    // {icon:'http://47.107.43.175:3005/files/1557198799551.jpg'}
            ]
        }
    
        componentDidMount() {
            this._startTimer();
    
        }
    
        componentWillUnmount() {
            // 如果存在this.timer,则使用clearTimeout清空。
            // 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
            this.timer && clearTimeout(this.timer);
        }
    
        render() {
            return (
                <View style={styles.continer}>
                    <ScrollView
                        ref='scrollView'
                        //水平方向
                        horizontal={true}
                        //当值为true时显示滚动条
                        showsHorizontalScrollIndicator={false}
                        //当值为true时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上
                        pagingEnabled={true}
                        //滑动完一贞
                        onMomentumScrollEnd={(e) => {
                            this._onAnimationEnd(e)
                        }}
                        开始拖拽
                        onScrollBeginDrag={() => {
                            this._onScrollBeginDrag()
                        }}
                        //结束拖拽
                        onScrollEndDrag={() => {
                            this._onScrollEndDrag()
                        }}
                    >
                        {this._renderAllImage()}
                    </ScrollView>
                    <View style={styles.pageViewStyle}>
                        {this._renderAllIndicator()}
                    </View>
                </View>
            );
        }
    
        /**开始拖拽 */
        _onScrollBeginDrag() {
            console.log("开始拖拽");
            this.timer && clearInterval(this.timer);
        }
    
        /**停止拖拽 */
        _onScrollEndDrag() {
            console.log("停止拖拽");
            this.timer && this._startTimer();
        }
    
        /**1.轮播图片展示 */
        _renderAllImage() {
            let allImage = [];
            let imgsArr = this.props.ImageData;
            for (let i = 0; i < imgsArr.length; i++) {
                let imgsItem = imgsArr[i];
                allImage.push(
                    <Image key={i} source={{uri: imgsItem.icon}} style={styles.imageStyle}/>
                );
            }
            return allImage;
        }
    
        /**2.手动滑动分页实现 */
        _onAnimationEnd(e) {
            // 手动的时候停止定时器
            this.timer && clearInterval(this.timer);
            //求出偏移量
            let offsetX = e.nativeEvent.contentOffset.x;
            //求出当前页数
            let pageIndex = Math.floor(offsetX / ScreenWidth)+1;
            if(pageIndex>this.props.ImageData.length||pageIndex==0)pageIndex=1;
            //更改状态机
            this.setState({currentPage: pageIndex});
    
            // 滑动之后开启定时器,重新计算
            this.timer && this._startTimer();
        }
    
        /**3.页面指针实现 */
        _renderAllIndicator() {
            let imgsArr = this.props.ImageData;
            let getNowPage = 1;//获取当前所在第几张图片
            for (let i = 1; i < imgsArr.length+1; i++) {
                if(i == this.state.currentPage){
                    getNowPage = i;
                }
            }
            return  <Text  style={[{fontSize: 30,color:"#FFF",textAlign:'center',width:80}]}>{getNowPage}/{imgsArr.length}</Text>;
        }
    
        /**4.通过定时器实现自动播放轮播图 */
        _startTimer() {
            clearTimeout(this.timer);
            let scrollView = this.refs.scrollView;
            this.timer = setInterval(
                () => {
                    console.log('开启定时器');
                    let imageCount = this.props.ImageData.length;
                    //4.1 设置当前页面
                    let activePage = 1;
                    //4.2判断
                    if (this.state.currentPage >= imageCount+1) {
                        activePage = 1;
                    } else {
                        activePage = this.state.currentPage + 1;
                    }
                    //4.4 让scrollview 滚动起来
                    let offsetX = (activePage-1 )* ScreenWidth;//获取当前的滚动区域
                    let allWidth = ScreenWidth * (imageCount-1);//获取scollview的总滚动区域
    
                    if(offsetX>allWidth)offsetX = 0;//当前的滚动  > 总的滚动   从新回到原点
                    scrollView.scrollResponderScrollTo({x: offsetX, y: 0, animated: true});
                    
                    //4.3 更新状态机
                     this.setState({currentPage: activePage});
                },
                this.props.duration
            );
        }
    }
    
    const styles = StyleSheet.create({
        continer: {
            backgroundColor: '#dddddd'
        },
        imageStyle: {
            height: 250,
            width: ScreenWidth
        },
        pageViewStyle: {
            height: 36,
            width: 80,
            backgroundColor: 'rgba(0,0,0,0.6)',
            position: 'absolute',
            bottom: 10,
            right:10,
            flexDirection: 'row',
            alignItems: 'center',
            borderRadius:15
    
        }
    });

     

     

    调用:

     

    <BasePicPlay duration={5000} ImageData={this.state.ImageData}/>
    
    
    
    
    ImageData = [
          {icon:'http://47.107.43.175:3005/files/1557198773629.jpg'},
          {icon:'http://47.107.43.175:3005/files/1557198732379.jpg'},
          {icon:'http://47.107.43.175:3005/files/1557198788379.jpg'},
          {icon:'http://47.107.43.175:3005/files/1557198799551.jpg'}
    ]

     

    展开全文
  • ReactNative资料全

    2017-02-13 09:18:09
    React Native优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native) https://github.com/LeoMobileDeveloper/ReactNativeMaterials#%E4%B8%AD%E6%96%87%E5%8D%9A%E5%AE%A2 关于开源...
  • React Native是近年来最值得花时间学习的移动开发新技术,其在不断进化、成熟的同时,性能也在持续提升。卜赫主要分享了React Native Pili在开发过程中的设计斟酌和踩过的坑。以下是正文: React Native是什么 ...
  • 跟着React Native的趋势

    2016-02-22 23:07:41
    Facebook在React.js Conf 2015大会上推出了React Native,想必各位从事app开发的都备受关注,有人说2016年React Native很可能会成为最受欢迎的的开源技术之一。
  • react-navigationreact-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但...
  • React NativeReact速学教程(上)本文出自《React Native学习笔记》系列文章。React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document,但篇幅比较多,...
  • 为了帮助大家快速上手React Native开发,在这本节中将向大家介绍开发React Native所需要的一些React必备基础知识。 概述 本节课将从React的特点、如何使用React、JSX语法,然后会对组件(Component)以及组件的属性...
  • React Native 基础篇

    2018-02-26 14:52:14
    虽然React Native出来已经很久了,但是还是想分享一下。技术这东西更新的太快,觉得有用就学,不能犹豫,不然什么都不会。 一,环境配置 1,这里讲的是window+android配置,如果想了解其他配置请去官网查看...
  •  刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!(二)Switch选择开关控件 2.1.该为An
  • 要实现这个折叠效果,,首先你需要一个 react-native-collapsible 组件 其实效果很简单,,粘贴即可用,内容自己定义 'use strict'; import React, {Component} from 'react' import { View, Text, Image, ...
  • 无论是 Java Swift JavaScript Typescript 这些OOP 面向对象、面向协议的语言。都有继承的概念和功能。react-native 自定义组件,通过继承实现代码的高复用,性能的扩展,来实现新的、功能更全面的组件。。
  •  React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScript编写原生的移动应用。从2015年3月份开源到现在,已经差不多有半年。目前,React-Native正在以几乎每周一个版本的速度进行快速迭代,开源...
  • React Native-组件的引用

    2016-08-27 17:37:51
    之前文章中,我们使用了许多React Native组件,也定义了一些组件。但是我们都没有定义组件的标识,我们都是通过回调方法处理组件对应的事件,这种情况能满足绝大多数需求,有些情况我们需要对组件进行操作,此时就...
  • React Native Awesome(汇聚知识,分享精华)React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。
  • import React, {Component} from ‘react’ import { Text, View, Animated, Easing, StyleSheet, } from ‘react-native’ export default class ScrollVertical extends Component { static defaultProps = { ...
1 2 3 4 5 ... 20
收藏数 953
精华内容 381
关键字:

native类组建 react