如何在反应原生纸单选按钮中切换单选按钮和标题

Question

我使用 react native paper 单选按钮，但它显示左侧的文本和右侧的单选按钮，例如：“文本 ✓”，我希望按钮位于左侧，右侧的文本我希望它是： “✓ 文字”

这是我下面的代码

                  <RadioButton.Group
                    onValueChange={handleChange('i_am')}
                    value={values.i_am}
                  >
                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                    />
                    <RadioButton.Item
                      label="2"
                      value="2"
                      color="#1E6DAD"
                    />
                  </RadioButton.Group>

Answer 1

解决方案是使用 flexDirection =>

                    <RadioButton.Item
                      label="1"
                      value="1"
                      color="#1E6DAD"
                      style={{ flexDirection: 'row-reverse', alignSelf: 'flex-start' }}
                    />

Answer 2

 <RadioButton.Group onValueChange={()=>handleChange(//here set the value of "1" or "2")} value={values.i_am} > <RadioButton.Item label="1" value="1" color="#1E6DAD" /> <RadioButton.Item label="2" value="2" color="#1E6DAD" /> </RadioButton.Group>

Answer 3

您可以使用自己的自定义视图来自定义它。

这是代码示例。

import * as React from "react";
import { View, StyleSheet } from "react-native";
import { RadioButton, Text } from "react-native-paper";

const MyComponent = () => {
  const [value, setValue] = React.useState(1);

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}
    >
      <View style={styles.buttonContainer}>
        <RadioButton value={1} />
        <Text style={styles.label}>1</Text>
      </View>
      <View style={styles.buttonContainer}>
        <RadioButton value={2} />
        <Text style={styles.label}>2</Text>
      </View>
    </RadioButton.Group>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  label: { flex: 1, textAlign: "right", marginRight: 16 },
});

export default MyComponent;

会这样显示

我希望这可以帮助你