最后，我们来看一下 RN 中内置的功能组件，这些组件会在用户浏览页面时给予用户不同程度的反馈，也是开发中不可或缺的重要组件。
主要如下：
- ActivityIndicator
- KeyboardAvoidingComponent
- Modal
- RefreshControl
- StatusBar
ActivityIndicator
ActivityIndicator 组件常用于发送请求时所显示的等待圆圈，两个常见的属性 size 和 color 分别用于设置等待圆圈的尺寸和颜色。
import React from 'react'import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
const App = () => ( <View style={[styles.container, styles.horizontal]}> <ActivityIndicator /> <ActivityIndicator size="large" /> <ActivityIndicator size="small" color="#0000ff" /> <ActivityIndicator size="large" color="#00ff00" /> </View>)
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, horizontal: { flexDirection: 'row', justifyContent: 'space-around', padding: 10, },})
export default App官方 API 文档地址：https://reactnative.dev/docs/activityindicator
KeyboardAvoidingComponent
我们在开发的时候，经常会遇到手机上弹出的键盘常常会挡住当前的视图，所以该组件的功能就是解决这个常见问题的，它可以自动根据手机上键盘的位置，调整自身的 position 或底部的 padding，以避免被遮挡。
常用属性：
-
behavior 该参数的可选值为：height、position、padding，来定义其自适应的方式
-
contentContainerStyle 如果设定 behavior 值为 position，则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。
-
keyboardVerticalOffset 视图离屏幕顶部有一定距离时，利用这个属性来补偿修正这段距离（键盘在竖直方向上的偏移量）
用法：
import { KeyboardAvoidingView } from 'react-native'
;<KeyboardAvoidingView style={styles.container} behavior="padding" enabled> ... 在这里放置需要根据键盘调整位置的组件 ...</KeyboardAvoidingView>下面我们首先来看一个会遮挡输入框的示例：
import React from 'react'import { View, TextInput, Image, StyleSheet, Dimensions } from 'react-native'import logo from './assets/logo.png'
const window = Dimensions.get('window')
const IMAGE_HEIGHT = window.width / 2
const App = () => { return ( <View style={styles.container}> <Image source={logo} style={styles.logo} /> <TextInput placeholder="Email" style={styles.input} /> <TextInput placeholder="Username" style={styles.input} /> <TextInput placeholder="Password" style={styles.input} /> <TextInput placeholder="Confirm Password" style={styles.input} /> </View> )}
const styles = StyleSheet.create({ container: { backgroundColor: '#4c69a5', flex: 1, alignItems: 'center', justifyContent: 'center', }, input: { height: 50, backgroundColor: '#fff', marginHorizontal: 10, marginVertical: 5, width: window.width - 30, paddingLeft: 10, }, logo: { height: IMAGE_HEIGHT, resizeMode: 'contain', marginBottom: 20, padding: 10, marginTop: 20, }, register: { marginBottom: 20, width: window.width - 100, alignItems: 'center', justifyContent: 'center', height: 50, backgroundColor: '#ffae', },})
export default App接下来我们需要做的，就是使用 KeyboardAvoidingView 替换 View，然后给它加一个 behavior 的 prop。
<KeyboardAvoidingView style={styles.container} behavior="padding" keyboardVerticalOffset={-150}> ...</KeyboardAvoidingView>在上面的代码中，我们使用 KeyboardAvoidingView 替换了最外层的 View，并设置 behavior 属性的值为 padding，keyboardVerticalOffset 属性也就是用户屏幕顶部和原生视图之间的距离设置为了 -150，从而避免了键盘遮挡输入框。
Modal
Modal 组件用来显示一个弹出框，弹出框常用于用户点击了某一个按钮后弹出一段提示信息。
下面是官方所提供的一个关于 Modal 组件的基本示例：
import React, { useState } from 'react'import { Alert, Modal, StyleSheet, Text, Pressable, View } from 'react-native'
const App = () => { const [modalVisible, setModalVisible] = useState(false) return ( <View style={styles.centeredView}> <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert('Modal has been closed.') setModalVisible(!modalVisible) }} > <View style={styles.centeredView}> <View style={styles.modalView}> <Text style={styles.modalText}>Hello World!</Text> <Pressable style={[styles.button, styles.buttonClose]} onPress={() => setModalVisible(!modalVisible)} > <Text style={styles.textStyle}>Hide Modal</Text> </Pressable> </View> </View> </Modal> <Pressable style={[styles.button, styles.buttonOpen]} onPress={() => setModalVisible(true)} > <Text style={styles.textStyle}>Show Modal</Text> </Pressable> </View> )}
const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 22, }, modalView: { margin: 20, backgroundColor: 'white', borderRadius: 20, padding: 35, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, }, button: { borderRadius: 20, padding: 10, elevation: 2, }, buttonOpen: { backgroundColor: '#F194FF', }, buttonClose: { backgroundColor: '#2196F3', }, textStyle: { color: 'white', fontWeight: 'bold', textAlign: 'center', }, modalText: { marginBottom: 15, textAlign: 'center', },})
export default App官方 API 文档地址：https://reactnative.dev/docs/modal
RefreshControl
该组件在 ScrollView 或 ListView 中用于添加拉动刷新功能。当 ScrollView 在 scrollY: 0 时，向下滑动会触发 onRefresh 事件。
下面是官方所提供的一个关于 RefreshControl 组件的基本示例：
import React from 'react'import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text,} from 'react-native'
const wait = (timeout) => { return new Promise((resolve) => setTimeout(resolve, timeout))}
const App = () => { const [refreshing, setRefreshing] = React.useState(false)
const onRefresh = React.useCallback(() => { setRefreshing(true) wait(2000).then(() => setRefreshing(false)) }, [])
return ( <SafeAreaView style={styles.container}> <ScrollView contentContainerStyle={styles.scrollView} refreshControl={ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> } > <Text>Pull down to see RefreshControl indicator</Text> </ScrollView> </SafeAreaView> )}
const styles = StyleSheet.create({ container: { flex: 1, }, scrollView: { flex: 1, backgroundColor: 'pink', alignItems: 'center', justifyContent: 'center', },})
export default App官方 API 文档地址：https://reactnative.dev/docs/refreshcontrol
StatusBar
StatusBar 是用来控制应用程序状态栏的组件。 状态栏是显示当前时间、Wi-Fi 和蜂窝网络信息、电池电量和/或其他状态图标的区域，通常位于屏幕顶部。
下面是官方所提供的一个关于 StatusBar 组件的基本示例：
import React, { useState } from 'react'import { Button, Platform, SafeAreaView, StatusBar, StyleSheet, Text, View,} from 'react-native'
const STYLES = ['default', 'dark-content', 'light-content']const TRANSITIONS = ['fade', 'slide', 'none']
const App = () => { const [hidden, setHidden] = useState(false) const [statusBarStyle, setStatusBarStyle] = useState(STYLES[0]) const [statusBarTransition, setStatusBarTransition] = useState(TRANSITIONS[0])
const changeStatusBarVisibility = () => setHidden(!hidden)
const changeStatusBarStyle = () => { const styleId = STYLES.indexOf(statusBarStyle) + 1 if (styleId === STYLES.length) { setStatusBarStyle(STYLES[0]) } else { setStatusBarStyle(STYLES[styleId]) } }
const changeStatusBarTransition = () => { const transition = TRANSITIONS.indexOf(statusBarTransition) + 1 if (transition === TRANSITIONS.length) { setStatusBarTransition(TRANSITIONS[0]) } else { setStatusBarTransition(TRANSITIONS[transition]) } }
return ( <SafeAreaView style={styles.container}> <StatusBar animated={true} backgroundColor="#61dafb" barStyle={statusBarStyle} showHideTransition={statusBarTransition} hidden={hidden} /> <Text style={styles.textStyle}> StatusBar Visibility:{'\n'} {hidden ? 'Hidden' : 'Visible'} </Text> <Text style={styles.textStyle}> StatusBar Style:{'\n'} {statusBarStyle} </Text> {Platform.OS === 'ios' ? ( <Text style={styles.textStyle}> StatusBar Transition:{'\n'} {statusBarTransition} </Text> ) : null} <View style={styles.buttonsContainer}> <Button title="Toggle StatusBar" onPress={changeStatusBarVisibility} /> <Button title="Change StatusBar Style" onPress={changeStatusBarStyle} /> {Platform.OS === 'ios' ? ( <Button title="Change StatusBar Transition" onPress={changeStatusBarTransition} /> ) : null} </View> </SafeAreaView> )}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#ECF0F1', }, buttonsContainer: { padding: 10, }, textStyle: { textAlign: 'center', marginBottom: 8, },})
export default App官方 API 文档地址：https://reactnative.dev/docs/statusbar