ReactNative基础组件

ReactNative框架为我们提供了两类开发基础设施

• 可视化组件
• 功能性API

通过使用这两组基础，就可以开发跨平台的App。

其中涉及的基础知识可以查阅ReactNative的官方文档：英文原版，中文版

可视化组件

我们在此讲解常用的几个可视化组件

• View
• Text
• Image
• TextInput
• Button
• View

View是ReactNative显示的基础。其最重要的功能是作为容器。每一个容器组件都会在其render方法中返回一个View组件，作为容器组件的视图容器。关于容器组件，后续的章节会详细讲解。

下面代码中的App组件，我们现在可以视为容器组件。

在ReactNative开发中，我们一般讲组件分为三种类型：基础组件，高级组件和容器组件

import React from 'react';import {   View } from 'react-native';export default class App extends React.Component {  render() {    return (      <View>      </View>    );  }}

View主要负责对视图布局是进行分层。具体内容在布局章节中会详细讲解。
我们在这里需要明确一点，ReactNative中所有其他可视化组件，都是View的子类。所以View的属性，其他组件也能够使用。

View样式

View常用的一个属性为style，通过style属性我们设置View的样式。例如背景颜色，大小，边框颜色，内外边距。

设置View样式有两种方法

//直接在JSX语法内，对style进行赋值<View style={{backgroundColor:'red'}}>

不推荐上述方法，在代码简单时，勉强可用。当代码复杂度上升之后，这样的写法会严重影响代码的阅读性能。
推荐使用下述方法：

import React from 'react';import {   StyleSheet,   View } from 'react-native';export default class App extends React.Component {  render() {    return (      <View style={styles.container}>      </View>    );  }}const styles = StyleSheet.create({  container: {    backgroundColor: 'red',  },});

代码中的StyleSheet对象是ReactNative框架提供的API，专门对样式对象进行构造。

这里简单说明下ReactNative中的样式运行原理。在传统发网页开发中，内容和布局是分开实现的。页面布局是通过CSS进行的。而且CSS可以进行全局修改。

但移动应用开发，内容和布局是绑定在一起的，不能进行分开实现。所以ReactNative不支持CSS进行布局操作。需要对每一个元素进行独立布局。StyleSheet对象可以对布局对象的进行优化提高布局效率。

此种修改style方式，适用所有ReactNative提供的可视化组件。

Text

Text是展示文本的一个组件。

import React from 'react';import {   StyleSheet,   View,  Text,} from 'react-native';export default class App extends React.Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.text}>{'HelloWorld'}</Text>      </View>    );  }}const styles = StyleSheet.create({  container: {    backgroundColor: 'red',  },  text:{    color:'blue',    fontSize:20,  }});

Image

Image是展示图片的组件。其使用方法分两种：展示本地图，展示网络图片

Image组件有一个source属性，用来接收展示图片的数据。

如果是本地图片，需要使用require函数指定图片相对路径

如果是网络图片，需要构造一个数据对象

{    uri:'图片的URL'}

并将此对象传入source属性中。

在使用网络图片时，一定要为Image组件设置大小，否则默认组件大小为0。

在使用本地图片时，如不设置Image组件大小，即图片大小为组件大小。如设置，以设置大小为准。

import React from 'react';import {   StyleSheet,   View,  Text,} from 'react-native';export default class App extends React.Component {  render() {    return (      <View style={styles.container}>        <Image          source={require('./icon.png')}          />        <Image          style={styles.logo}          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}          />      </View>    );  }}const styles = StyleSheet.create({  container: {    backgroundColor: 'red',  },  logo:{    width:100,    height:100,  }});

Button

基础按钮，一般测试是经常使用，真实项目中一般自己定制

<Button  onPress={onPressLearnMore}  title="Learn More"/>

TextInput

获取用户输入的组件
该组件通过事件回调接口onChangeText获取用户输入

import React, { Component } from 'react';import { TextInput } from 'react-native';class UselessTextInput extends Component {  constructor(props) {    super(props);    this.state = { text: 'Useless Placeholder' };  }  render() {    return (      <TextInput        style={{height: 40, borderColor: 'gray', borderWidth: 1}}        onChangeText={(text) => this.setState({text})}        value={this.state.text}      />    );  }}