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}
      />
    );
  }
}