React Native 基础组件

View：搭建用户界面的最基础组件。
Text：显示文本内容的组件
Image：用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。
TextInput：允许用户在应用中通过键盘输入文本的基本组件；
ScrollView：一个封装了平台的ScrollView（滚动视图）的组件；

1举例：Image
//导入模块
import React from ‘react’;
import {StyleSheet,View,Text,Image} from ‘react-native’;
//定义样式
const styles=StyleSheet.create({
img:{
width:60,
height:60
}
});

export default class App extends React.Component{
constructor(props){
super(props);
this.state={
netImg:{uri:“http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg”},
locImg:require("…/imgs/locImg.jpg")
}
}
render(){
{/*注意：
1.属性必须是 uri 不要错写成url
2.ios9 不支持 http(要在Info.plist文件下面新添配置)
3.Android 平台下，默认不支持 GIF、WebP 格式。(修改 build.gradle)
// 如果你需要支持Android4.0(API level 14)之前的版本
implementation ‘com.facebook.fresco:animated-base-support:1.10.0’

// 如果你需要支持GIF动图
implementation ‘com.facebook.fresco:animated-gif:1.10.0’

// 如果你需要支持WebP格式，包括WebP动图
implementation ‘com.facebook.fresco:animated-webp:1.10.0’
implementation ‘com.facebook.fresco:webpsupport:1.10.0’

// 如果只需要支持WebP格式而不需要动图
implementation ‘com.facebook.fresco:webpsupport:1.10.0’
*/}
return <View>
{/*图片资源使用 source 属性设置
注意：网络图片，必须先设置 宽度和高度，才能显示
/}
<Image source={this.state.netImg} style={styles.img}></Image>
{/
本地图片：需要使用 require 方法
*/}
<Image source={this.state.locImg} style={{width:100,height:100}}></Image>
</View>
}
}
2.举例TextInput
//导入组件
import React from ‘react’;
import {StyleSheet,View,TextInput} from ‘react-native’;
//定义样式
const styles=StyleSheet.create({
inp:{
width:220,
borderColor:‘gray’,
borderWidth:1,
borderRadius:5,
paddingLeft:10
}
});
//定义组件
export default class App extends React.Component{
//构造函数
constructor(props){
super(props);
this.state={
msg:“aaaaaaa”
}
}
//定义事件
_change=(newText)=>{
this.setState({
msg:newText
});
}
//渲染标签
render(){
return <View>
<TextInput onChangeText={this._change.bind(this)} style={styles.inp} value={this.state.msg}></TextInput>
</View>
}
}
3.举例:ScrollView
ScrollView和FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么我们还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。
//导入模块
import React from ‘react’;
import { StyleSheet, Text, View,ScrollView } from ‘react-native’;
//定义组件
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
{/showsVerticalScrollIndicator：是否显示滚动条 true显示/}
<ScrollView showsVerticalScrollIndicator={false}>
<Text style={{height:1000}}>Open up App.js to start working on your app!
</ScrollView>
</View>
);
}
}
//定义样式
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#fff’,
alignItems: ‘center’,
justifyContent: ‘center’,
},
});