React Native 开发之 (04) 例子讲解

时间:2023-12-14 22:27:14

一.了解index.ios.js

  React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发,开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。让我们使用以下react native命令生成一个项目。

react-native init demo --verbose

  现在让我们用编辑器打开index.ios.js文件,分析代码结构:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native'; class demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake 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,
  },
}); AppRegistry.registerComponent('demo', () => demo);

1 导入模块

  第一句:import React, { Component } from 'react';
  使用import引入模块,相当于java的import和c++的#include。在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:

//ES5
var React = require("react-native");
var {
Image,
Text,
PropTypes
} = React; //引用不同的React Native组件

在ES6里,import写法更为标准

//ES6
import React, {
Image,
Text,
PropTypes
} from 'react-native';、

2 批量定义组件  

  第二句代码,批量定义组件:

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

3 定义组件

  构建项目的入口类。在ES6里,通过定义一个继承自React.Component的class来定义一个组件类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码。其实就是JSX的模板语法。

class demo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello React Native.
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

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

  相对于web开发,需要提供视图的样式,那么StyleSheet.create就是干这件事的,只是用JS的自面量表达了css样式。在render方法返回的视图模板里已经体现出来了,即style={styles.container}.其中style是视图的一个属性,styles就是是定义的样式表,container是样式表中的一个样式。

const styles = StyleSheet.create({
container: {
flex: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: ,
textAlign: 'center',
margin: ,
color: 'red'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
});

5 注册应用入口

  最后将APP组件demo渲染到容器中。

AppRegistry.registerComponent('demo', () => demo);

资料参考:
http://www.cnblogs.com/bennman/p/5301320.html