RN基础以及组件学习技巧

前端之家收集整理的这篇文章主要介绍了RN基础以及组件学习技巧前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的React相关文章