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

【问题标题】：How to switch radio button and title in react native paper radio button如何在反应原生纸单选按钮中切换单选按钮和标题
【发布时间】：2021-02-21 08:29:51
【问题描述】：

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

这是我下面的代码

                  <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>

【问题讨论】：

标签： javascript react-native radio-button react-native-paper

【解决方案1】：

解决方案是使用 flexDirection =>

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

【讨论】：

【解决方案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>

【讨论】：

亲爱的，我想改变风格，改变文字和按钮的侧面现在它显示为：“Text ✓”，我希望它是：“✓ Text”

【解决方案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;

会这样显示

希望对您有所帮助

【讨论】：

好主意..但是文本无法点击