给Web开发者写的React Native简介，React Native与React的区别与对比（2）

本文我们继续之前的话题给Web开发者写的React Native简介，React Native与React的区别与对比（1），在上文中我们讲到在React Native想要写<p>或者<span>需要用Text组件。除了展示文本，还有一个很重要的东西就是展示图片。在React Native中你无法使用HTML的<img>，而要用React Native提供的Image组件。

处理图片可以说是React Native中的一个难点，因为在React Native中无论是什么图片都需要你设置一个宽度和高度，见实例：

import React from 'react';
import {Image} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const DisplayAnImage = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Image
        style={{ width: 50, height: 50 }}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={{ width: 50, height: 50 }}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={{ width: 66, height: 58 }}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

export default DisplayAnImage;

你不能像在Web端那样直接写个width: 100%就完事了，由于React Native并不会计算图片的高度，所以如果你没有给高度设置一个数值，那么图片将会不可见。因此，在React Native想要实现Web端里width: 100%; height: 100%的图片，就需要你动态计算每张图片的高度（宽度固定）。好在React Native提供了getSize() API，允许你得到每张图片的原始宽度和高度，你可以根据自己的需要用这个API来造轮子。

图片除了宽度和高度两个重要属性，还有一个很重要的属性就是resizeMode，这个对应Web端CSS的object-fit。而跟Web端不同，resizeMode的取值并非跟object-fit一一对应，并且resizeMode的默认值是cover，即图片会自动裁剪以保持宽高比。

除了使用React Native本身的Image组件，你也可以使用expo-image，或者react-native-fast-image。不过fast-image已经没有维护了，倒是有个fork这个库的有维护，有需要的可以自行寻找。

说完Image，还有一个很重要的东西就是列表List了。在Web端只要你的内容超出了屏幕高度，那么滚动是很自然的事情。但是在React Native仅仅使用View组件是不能滚动的，内容超出屏幕高度的结果就是内容不可见，想要滚动就需要用到ScrollView。而ScrollView提供了大量的API，可以让你非常方便的设置需要跟滚动相关的东西，这跟Web端相比是一个优势。

比如说实现无限滚动，在Web端你要么使用别的组件，要么自己实现，实现方法大多都比较复杂，不仅要监听滚动，还要考虑很多其他东西。而在React Native你只需要将相应的handler放到onEndReached这个prop里，当滚动到底部时就会自动执行一次你的handler。又比如监听滚动，在Web端你需要在页面挂载时添加监听器，然后在页面卸载时去掉监听器，而在React Native你只需要直接将handler放到onScroll这个prop里就可以了。见下面例子：

const App = () => {
    
    function load_more(){
        console.log('end!')
    }
    
    function ScrollHandler(e){
        console.log(e)
    }

    return (
      <SafeAreaProvider>
        <SafeAreaView style={styles.container} edges={['top']}>
          <ScrollView style={styles.scrollView} 
          onEndReached={load_more} 
          onScroll={ScrollHandler}>
            <Text style={styles.text}>
                Long Text......
                Long Text......
                Long Text......
                Long Text......
                Long Text......
                Long Text......
                Long Text......
                Long Text......

            </Text>
          </ScrollView>
        </SafeAreaView>
      </SafeAreaProvider>
    );
}

除此之外，你还可以设置水平滚动，甚至水平换页实现走马灯效果。ScrollView只是List最简单的一种方式，它会一次性渲染所有子节点，因此性能不好。这时，FlatList和SectionList就派上用场了，他们继承了ScrollView的几乎所有特征，并且性能更好。而FlatList是其中使用率最高的，它提供了numColumns属性，允许你轻松构建网格布局。

而除了React Native本身提供的组件，对于大数据列表，你还可以使用第三方库FlashList或者RecyclerListView，来替代FlatList获得更好的性能。值得一提的是，FlashList除了是高性能列表，还提供了瀑布流布局的列表组件MasonryFlashList。

说完列表，我们来讲一下React Native的触碰事件。在React Native你不能像在React Web端那样，随便一个地方都能设置onClick。并且React Native只有Press事件，你需要在特定的组件如Touchable、Pressable、Text、Button才能处理Press事件。其中Touchable组件分为TouchableHighlight、TouchableOpacity、TouchableWithoutFeedback，顾名思义他们分别对应触碰高亮、触碰改变透明度、触碰无反馈（触碰不改变样式）。而Press事件在Pressable和Text又分为Press和LongPress。

<Pressable onPress={onPressFunction} onLongPress={onLongPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>

最后，想要写按钮和输入框，需要Button和TextInput组件，React Native的按钮自带样式比HTML的按钮要好看，并且安卓版点击按钮自带波纹效果。而React Native的输入框使用体验跟Web端的大体一样，就是提供props有些不同，这里就不多说了。

本文到这里，已经将React Native跟React的主要区别过一遍了。由于篇幅问题，更多的内容以及细节就不详细展开了。之后我还会更更多React Native相关的文章，如果你对React Native感兴趣，欢迎在评论区交流讨论。