[React-Native]常用组件

一、Image组件

（1）引用本地图片
将图片保存到本地：

调用：

（2）引用网络图片

案例：

二、Label组件

三、Input输入组件

案例：当用户键入时，您将他们的词翻译成不同的语言。 在这种新语言中，每个单词的写法都是一样的：??。 所以句子“你好 鲍勃”将翻译为“??????”。

import React,{ Component } from 'react';
import { AppRegistry,Text,TextInput,View } from 'react-native';

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
        <View style={{padding: 10}}>
          <TextInput
            style={{height: 40}}
            placeholder="Type here to translate!"
            onChangeText={(text) => this.setState({text})}
          />
          <Text style={{padding: 10,fontSize: 42}}>
            {this.state.text.split(' ').map((word) => word && '??').join(' ')} </Text> </View> ); } } AppRegistry.registerComponent('HelloWorld',() => PizzaTranslator);

解释：
Input组件里面每输入一个字符都会检测调用下面Text的以空格分割字符串并且每一个字符串都用Pizza图替换，中间以空格连接。
效果图：

四、Scrollview组件

ScrollView是一个通用的滚动容器，可以托管多个组件和视图。 可滚动项不需要是同质的，您可以垂直和水平滚动（通过设置水平属性）。

案例：例创建一个垂直的ScrollView，图像和文本混合在一起。