RN基础以及组件学习技巧
发布时间:2020-12-15 07:25:00 所属栏目:百科 来源:网络整理
导读:RN基础以及组件学习技巧 上一篇博客讲了RN环境的搭建,和RN项目的创建以及运行,如有什么问题,可以留言 这节讲下RN基础以及组件的学习 这是RN项目的结构图,index.android.js 和 index.ios.js分别对应了android ,ios 平台的软件程序入口。package.json 配
RN基础以及组件学习技巧上一篇博客讲了RN环境的搭建,和RN项目的创建以及运行,如有什么问题,可以留言这节讲下RN基础以及组件的学习这是RN项目的结构图,index.android.js 和 index.ios.js分别对应了android ,ios 平台的软件程序入口。package.json 配置文件,类似于Android studio 中的build.gradle打开index.android.js 开始基本模版分析:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ //导入组件,每使用一个官方组件或者开源组件的时候必须要import //类似于java中导包 import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View } from 'react-native'; //导出一个默认的组件,注意一个js文件中只能有一个default的组件,但可 //以有多个组件 export default class one_demo extends Component { //组件的渲染方法,返回一个布局,布局实现:组件+flexbox render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started,edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'n'} Shake or press menu button for dev menu </Text> </View> ); } } //组件的样式,大小,颜色等 const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,}); //将one_demo组件注册到程序入口中 AppRegistry.registerComponent('one_demo',() => one_demo); 熟悉RN模版,您需要掌握基础的js,jsx,es6语法,flexbox弹性盒子布局以及RN 组件的生命周期,组件的props属性和state状态的作用具体的可以到 RN中文网学习,图中圈中的部分都需要学习和掌握学习技巧,多看文档,多百度,多动手练习,多思考,毕竟现在RN的资料也很多了,学会了基础,就可以开始下一篇的项目实战了。OVER简 书博客:http://www.jianshu.com/p/ca8a03fffbb4(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |