React Native Expo中的单选按钮

React Native Expo提供了一种简单而有效的方法，让开发者实现单选按钮。这个方法可以用于多个场景，例如选择列表选项、单选题等。

准备工作

在使用React Native Expo的单选按钮之前，您需要确保已安装Expo CLI，并在您的项目中导入必要的模块：

import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

在您的组件中，您需要定义一些状态来处理单选按钮的选中状态。例如，您可以使用useState钩子来生成一个选中的状态：

const [selectedValue, setSelectedValue] = useState(null);

这将声明一个名为selectedValue的状态和一个名为setSelectedValue的函数，用于更改状态的值。initialValue（这里是null）是状态初始值。

实现单选按钮

洛!我们现在可以开始实现单选按钮了！单选按钮可以通过一组嵌套的TouchableOpacity和Text元素来实现，如下所示：

<View>
  <TouchableOpacity
    onPress={() => setSelectedValue('option1')}
    style={{ flexDirection: 'row', alignItems: 'center' }}
  >
    {selectedValue === 'option1' ? (
      <View style={styles.radioButtonSelected} />
    ) : (
      <View style={styles.radioButton} />
    )}
    <Text style={styles.radioText}>Option 1</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => setSelectedValue('option2')}
    style={{ flexDirection: 'row', alignItems: 'center' }}
  >
    {selectedValue === 'option2' ? (
      <View style={styles.radioButtonSelected} />
    ) : (
      <View style={styles.radioButton} />
    )}
    <Text style={styles.radioText}>Option 2</Text>
  </TouchableOpacity>
  <TouchableOpacity
    onPress={() => setSelectedValue('option3')}
    style={{ flexDirection: 'row', alignItems: 'center' }}
  >
    {selectedValue === 'option3' ? (
      <View style={styles.radioButtonSelected} />
    ) : (
      <View style={styles.radioButton} />
    )}
    <Text style={styles.radioText}>Option 3</Text>
  </TouchableOpacity>
</View>

在上述代码中，我自定义了选中单选按钮和未选中单选按钮的样式：

const styles = StyleSheet.create({
  radioButton: {
    height: 20,
    width: 20,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  radioButtonSelected: {
    height: 20,
    width: 20,
    borderRadius: 10,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  radioText: {
    fontSize: 16,
  },
});

这些样式将为我们创建圆形的单选按钮，其中radioButton是未选中的，radioButtonSelected是选中的。在每个TouchableOpacity元素中，我使用选中的状态来决定使用哪种样式。

完整的代码

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function App() {
  const [selectedValue, setSelectedValue] = useState(null);

  const styles = StyleSheet.create({
    radioButton: {
      height: 20,
      width: 20,
      borderRadius: 10,
      borderWidth: 1,
      borderColor: '#000',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 10,
    },
    radioButtonSelected: {
      height: 20,
      width: 20,
      borderRadius: 10,
      backgroundColor: '#000',
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: 10,
    },
    radioText: {
      fontSize: 16,
    },
  });

  return (
    <View>
      <TouchableOpacity
        onPress={() => setSelectedValue('option1')}
        style={{ flexDirection: 'row', alignItems: 'center' }}
      >
        {selectedValue === 'option1' ? (
          <View style={styles.radioButtonSelected} />
        ) : (
          <View style={styles.radioButton} />
        )}
        <Text style={styles.radioText}>Option 1</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => setSelectedValue('option2')}
        style={{ flexDirection: 'row', alignItems: 'center' }}
      >
        {selectedValue === 'option2' ? (
          <View style={styles.radioButtonSelected} />
        ) : (
          <View style={styles.radioButton} />
        )}
        <Text style={styles.radioText}>Option 2</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => setSelectedValue('option3')}
        style={{ flexDirection: 'row', alignItems: 'center' }}
      >
        {selectedValue === 'option3' ? (
          <View style={styles.radioButtonSelected} />
        ) : (
          <View style={styles.radioButton} />
        )}
        <Text style={styles.radioText}>Option 3</Text>
      </TouchableOpacity>
    </View>
  );
}

现在您可以在自己的React Native Expo应用程序中使用这个单选按钮！