react-native基础教程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native基础教程相关的知识,希望对你有一定的参考价值。

转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/

React-native是Facebook的开源项目,它的口号是"Learning once,write anywhere",目的是统一的View的编写。

一、React-Native基本语法模板

‘use strict‘;  =====>(严格模式)

var React = require(‘react-native‘);   =====>(导入模块react-native,关键字是: require)

var {

  AppRegistry,

  StyleSheet,     =====>(声明要用到得系统组件)

  Text,

  View,

} = React;

var FirstApp = React.createClass({   =====>(创建组件名称是:FirstApp, 关键字是createClass)

  render: function() {   =====>(渲染方法, 组件中必须得方法)

return (

 

              <View style={styles.container}>=====>(这几行就是JSX语法写的)

                                              <Text style={{fontSize: 18}}>这是我的第一个React Native APP</Text>   =====>(显示在手机屏幕上的内容在这写) 

 

              </View>=====>(这里用view包起来,而不是用div)

          );

    }

});

 

var styles = StyleSheet.create( =====>(创建样式,看上面加粗划线的代码,可以在这里定义,也可以直接写在代码里面,如上面的fontSize:18)

  container: {

      flex: 1,

      justifyContent: ‘center‘,      

      alignItems: ‘center‘,

      backgroundColor: ‘orange‘

    }

});

 

AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp);   =====>(注册应用,使能够加载运行, FirstApp就是你的App名称)

 

module.exports = FirstApp; =====>(导出组件,使能够在别的组件中用)

二、React-native的 组件化,我们可以把你需要的分功能自定义米快写代码,然后把所有的模块组合起开,就是一个完整的程序(这样子写代码看起比较清晰)

代码如下所示:

‘use strict‘;

var React=require(‘react-native‘);

var {

AppRegistry,

StyleSheet,

Text,

View

}=React;

var FirstApp=React.createClass({

render:function(){

<View style={styles.container}>  

<HelloWorld myText=‘我是第一‘/>

<HelloWorld myText=‘我是第二‘/>==>(这里引用了下一个组件,HelloWorld自动成为FiirstApp的子组件)

<HelloWorld myText=‘我是第三‘/>

</View>

 

}

 

});

var HelloWorld=React.createClass({

render:function(){

return (

<View>

<Text style={{fontSize:20,color:‘red‘}}>{this.props.myText}</Text>

=====>(从父组件传过来的myText属性,用this.props.myText接收) 

</View>

)

 

}

 

 

})

技术分享 

三、React-Native生命周期

agetInitialState: 在组建被挂载之前调用,我们一般在里面定义初始state

   bgetDefaultProps: 在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 getDefaultProps 中定义的属性,则此处返回的对象中的相应属性将会合并到 this.props

  ccomponentWillMount: 服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用

  drender: 执行视图的渲染操作

  ecomponentDidMount: 在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)

     fcomponentWillUnmount: 组件从DOM中移除时调用,一般在次方法进行必要的清理工作

组件的执行顺序示例:

‘use strict‘;

var React = require(‘react-native‘);

var {

  AppRegistry,

  StyleSheet,

  Text,

  View,

} = React;

var FirstApp = React.createClass({

    getDefaultProps: function() {

console.log(‘getDefaultProps‘);

},

getInitialState: function() {

console.log(‘getInitialState‘)

  return { };

 },

componentWillMount: function() {

 console.log(‘componentWillMount‘);

    },

componentDidMount: function() {

console.log(‘componentDidMount‘);

    },

componentWillUnmount: function() {

console.log(‘componentWillUnmount‘);

    },

ender: function() {

 console.log(‘render‘);

 return (

 

              <View style={styles.container}>

 

                  <HelloWorld myText=‘我是第一‘ />

                  <HelloWorld myText=‘我是第二‘ />

                  <HelloWorld myText=‘我是第三‘ />

 

              </View>

          );

    }

});

 

var HelloWorld = React.createClass({

  

    render: function() {

 

        return (

 

              <View>

                  <Text style={{fontSize: 20, color: ‘red‘}}>{this.props.myText}</Text>

              </View>

          );

    }  

});

 

var styles = StyleSheet.create({

  container: {

      flex: 1,

      justifyContent: ‘center‘,

      alignItems: ‘center‘,

      backgroundColor: ‘orange‘

    }

});

 

AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp);

 

module.exports = FirstApp;

 技术分享

 

以上是关于react-native基础教程的主要内容,如果未能解决你的问题,请参考以下文章

jstl标签库基础教程及其使用代码

“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它,我还需要配置其他东西吗?

react-native 入门基础介绍

VIM 代码片段插件 ultisnips 使用教程

markdown 打字稿...编码说明,提示,作弊,指南,代码片段和教程文章

react-native--基础(方法调用)