教你如何用React-Native开发原生应用（三）

本章将主要介绍我在该APP中使用的React Native组件。

Facebook给React Native提供了很多封装的组件，有些组件学起来特别容易，而有些却很复杂。

1.View和Text

View组件定义容器，和html标签div类似。可以对它进行样式的更改和Flex布局。 Text组件定义文字，和html标签h、p、span类型。可以对它进行字体大小、颜色、对齐方式的更改。

<View style={styles.container}>
    <Text style={styles.welcome}>
      欢迎使用找车场!{'\n'}创作人：帅哥一枚
    </Text>
    <Text style={styles.instructions}>
      这是一次挑战，也是我的第一个APP。
    </Text>
    <Text style={styles.instructions}>
      首先感谢爽姐为我设计的LOGO，其次感谢女朋友的陪伴、默默的支持...{'\n'}
      最后感谢React Native这门技术，让我用自己最擅长的JS去实现原生开发，感谢...
    </Text>
</View>

2.Image

该组件定义图片，可以对它进行大小、数据源的更改。

<Image  source={{uri: this.props.data.image }}
  style={styles.bannerItem}>
  <Text style={styles.bannerTitle}>
    { this.props.data.title } 
  </Text>
</Image>

3.ScrollView

该组件定义滚动容器，适合用来显示数量不多的滚动元素。与之相同的还有ListView，除此外在新的0.43-rc.1中,加入了三种新的性能更好的FlatList、SectionList与VirtualizedList组件。

<ScrollView style={styles.container}>
    <Text style={styles.text}></Text>
    <Text style={styles.text}>Q: 该APP的开发者是公司团队还是独立开发者?</Text>
    <Text style={[styles.text,styles.borderColor]}>A: 独立开发者.</Text>
    <Text style={styles.text}>Q: 该APP使用的场景是什么?</Text>
    <Text style={[styles.text,styles.borderColor]}>A: 当身处外地,需要找附近停车的情况,可使用该APP找到附近的停车场.</Text>
    <Text style={styles.text}>Q: 数据的来源是什么?</Text>
    <Text style={[styles.text,styles.borderColor]}>A: 该APP的数据来源主要是高德地图提供的数据服务.</Text>
    <Text style={styles.text}>Q: 能否保证数据的准确性?</Text>
    <Text style={[styles.text,styles.borderColor]}>A: 高德地图提供的数据服务是相对很精准的,但是不包括用户手机GPS定位不准的情况.</Text>
    <Text style={styles.text}>Q: 其他.</Text>
    <Text style={[styles.text,styles.borderColor]}>A: 如有其他问题,可发送邮件到15828274523@163.com .</Text>
    <Text style={styles.text}>......</Text>
</ScrollView>

4.TouchableOpacity、TouchableHighlight、TouchableWithoutFeedback、TouchableNativeFeedback

该系列组件定义响应用户的触摸操作，包裹在容器上使用。

TouchableOpacity //按下时背景透明度会降低
TouchableHighlight //按下时背景会变暗
TouchableWithoutFeedback //按下时无任何变化
TouchableNativeFeedback //按下时水波纹的效果，仅限andoird


<TouchableOpacity onPress={this._showDetail.bind(this)}>
    <View style={[styles.item, {borderTopWidth:Util.pixel}]}>
        <Text style={styles.text}>功能介绍</Text>
    </View>
</TouchableOpacity>

5.ActivityIndicator

该组件定义loading图标，尤其是在请求数据的时候会用到它。可以定义其大小、颜色、位置、显隐等。

<ActivityIndicator
    animating={true}
    style={[{height: 80,marginTop: 250}]}
    size="large"
/>

6.WebView

该组件定义WebView容器，可以嵌入HTML代码进去，也可以注入JS代码。

<WebView
    style={[styles.container,{marginTop: this.state.isMargin || -20}]}
    startInLoadingState={true}
    onError={this._loadError.bind(this)}
    injectedJavaScript={"document.querySelectorAll('.header-for-mobile')[0].style.display='none'"}
    source={url}>
</WebView>

React Native给的组件挺多的，优秀的插件和第三方库也很多，导致学习React Native的成本也很高。虽然我用React Native弄APP出来，但我认为自己也才算刚入门React Native。毕竟还有很多很优秀的组件和库都还没怎么用过，如FlatList、react-native-vector-icons、react-redux...