功能组件 - wangshengliang

最后，我们来看一下 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 组件的基本示例：

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

ActivityIndicator#

KeyboardAvoidingComponent#

Modal#

RefreshControl#

StatusBar#