react-native基础教程(1)
|
转载链接：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,255);">View,255);">} = 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,255);"> justifyContent: 'center',255);"> alignItems: 'center',255);"> backgroundColor: 'orange' AppRegistry.registerComponent('FirstApp',() => FirstApp);=====>(注册应用，使能够加载运行,FirstApp就是你的App名称) module.exports = FirstApp; =====>(导出组件，使能够在别的组件中用) 二、React-native的 组件化,我们可以把你需要的分功能自定义米快写代码，然后把所有的模块组合起开，就是一个完整的程序(这样子写代码看起比较清晰) 代码如下所示: 'use strict'; var React=require('react-native'); AppRegistry,255);">StyleSheet,255);">Text,255);">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({ return ( <View> <Text style={{fontSize:20,color:'red'}}>{this.props.myText}</Text> =====>(从父组件传过来的myText属性,用this.props.myText接收) </View> ) })
三、React-Native生命周期 a、getInitialState:在组建被挂载之前调用，我们一般在里面定义初始state值 b、getDefaultProps:在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定getDefaultProps中定义的属性，则此处返回的对象中的相应属性将会合并到this.props c、componentWillMount:服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用 d、render:执行视图的渲染操作 e、componentDidMount:在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用） f、componentWillUnmount:组件从DOM中移除时调用，一般在次方法进行必要的清理工作 组件的执行顺序示例: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet,255);">Text,255);">View,255);">} = React; var FirstApp = React.createClass({ getDefaultProps: function() { console.log('getDefaultProps'); },255);">getInitialState: function() { console.log('getInitialState') return { }; componentWillMount: function() { console.log('componentWillMount'); },255);">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> } var styles = StyleSheet.create({ container: { flex: 1,255);"> justifyContent: 'center',255);"> alignItems: 'center',255);"> backgroundColor: 'orange' AppRegistry.registerComponent('FirstApp',() => FirstApp); module.exports = FirstApp;
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
