React Native - 使用第三方组件

ScrollView

ScrollView默认是垂直方向的滚动，可以使用horizontal={true}让它在水平方向滚动，当我们需要隐藏垂直方向的滚动条的时候，可以用showsVerticalScrollIndicator={false}来实现。在安卓上ScrollView有一个问题，就是显示不完整，但是在iOS平台没有这个问题，可以在ScrollView的最后补上一个View，当Platfrom.OS === 'ios'的时候高度为0，是android的时候给一个合适的高度即可。

第三方组件

在开发中很可能会遇到一些官方组件里没有的控件，就需要引入一些第三方组件了，比如下面的一些三方组件。

第三方组件
在使用第三方组件的时候需要安装和配置（需要看文档中是否需要配置）后才能使用，比如以WebView为例：

# React Native WebView Getting Started Guide

$ yarn add react-native-webview
或者
$ npm install --save react-native-webview

# From react-native 0.60 autolinking will take care of the link step but don't forget to run `pod install`
# React Native modules that include native Objective-C, Swift, Java, or Kotlin code have to be "linked" so that the compiler knows to include them in the app.

$ react-native link react-native-webview

*NOTE: If you ever need to uninstall React Native WebView, run `react-native unlink react-native-webview` to unlink it.*

# If using CocoaPods, in the `ios/` or `macos/` directory run:

$ pod install

# Android - react-native-webview version >=6.X.X: Please make sure AndroidX is enabled in your project by editting `android/gradle.properties` and adding 2 lines:

android.useAndroidX=true
android.enableJetifier=true

也就是安装完后，如果版本是0.60以及以上的RN版本就不用进行配置，否则需要执行react-native link react-native-webview进行配置后才能继续下一步，在iOS工程中需要到ios目录下执行pod install，在安卓工程中需要在android/gradle.properties中确保有下面的两行配置，最后才能去代码里使用。

android.useAndroidX=true
android.enableJetifier=true

可以使用下面的样例去加载web链接：

<Webview>
    source = {{uri: 'https://www.m.baidu.com'}}
    style = {{marginTop: 44}}
</Webview>

也可以使用下面的样例直接加载HTML源码：

<Webview>
    source = {{html: '<h1 style="color: blue">React Native</h1>'}}
    originWhitelist={['*']}
</Webview>

所有的第三方组件，基本都是这个思路，到官方的github根据文档操作到最后能使用即可。