React Native 中的自定义单选按钮答案

【问题标题】：Custom Radio Button In React NativeReact Native 中的自定义单选按钮
【发布时间】：2021-05-28 19:45:21
【问题描述】：

我正在尝试使用 View 和 Radio Group 创建一个自定义按钮，但无法在另一个上重叠。基本上我要创造这样的东西：

我确实检查了反应论文，但仍然没有运气。

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

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

  return (
    <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
      <View>
        <Text>First</Text>
        <RadioButton value="first" />
      </View>
      <View>
        <Text>Second</Text>
        <RadioButton value="second" />
      </View>
    </RadioButton.Group>
  );
};

export default MyComponent;

我正在尝试使用此代码。

有人可以帮我解决这个问题吗？

【问题讨论】：

您能否添加您当前的代码，以便我们可以看到您到目前为止所做的工作。
展示你的作品:-)。如果您自己先尝试一下，您更有可能获得帮助。然后，如果您遇到麻烦，请发布您遇到困难的代码并提出具体问题。祝你好运。
问题已编辑
@Pooja 你想像上图那样设置按钮的样式吗？
是的，我已经在网站上做过这些类型的工作，但我是 React Native 的新手

标签： react-native radio-button radio-group

【解决方案1】：

您可以为视图添加样式，也可以添加图标。代码如下所示，您可以根据需要更改样式

import * as React from 'react';
import { View, StyleSheet,TouchableOpacity } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
import { Ionicons,Fontisto } from '@expo/vector-icons';

const styles = StyleSheet.create({
  mainWrapper: {
    backgroundColor: '#c36e01',
    borderRadius: 10,
    padding: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent:'space-between',
    marginVertical:5
  },
});

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

  return (
    <RadioButton.Group
      onValueChange={(newValue) => setValue(newValue)}
      value={value}>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('first')}>
       <Fontisto name="date" size={24} color="white" />
        <Text style={{ color: 'white' }}>First</Text>
        <RadioButton value="first" color="white"/>
      </TouchableOpacity>
      <TouchableOpacity style={styles.mainWrapper} onPress={()=>setValue('second')}>
       <Ionicons name="alarm" size={24} color="white" />
        <Text style={{ color: 'white' }}>Second</Text>
        <RadioButton value="second" color="white"/>
      </TouchableOpacity>
    </RadioButton.Group>
  );
};

export default MyComponent;

你可以试试小吃 https://snack.expo.io/X53aqaaCH

【讨论】：

在这种情况下，我必须单击单选按钮点才能选择，如果我尝试单击完整部分并尝试选择单选按钮怎么办？
这看起来不错，我将尝试从刻度线中删除点。感谢@Guruparan Giritharan 的帮助

【解决方案2】：

使用以下代码作为组件：

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

export default function Radio({ value, changeValue, leftImage, text }) {
    return <TouchableOpacity
        style={radioStyle.btn}
        onPress={changeValue}
    >
        <Image source={leftImage} style={radioStyle.leftImg} />
        <Text style={radioStyle.txt}>{text}</Text>
        {value ? <Image source={require("../assets/images/check-mark.png")} style={radioStyle.tick} /> : null}
    </TouchableOpacity>
}

const radioStyle = StyleSheet.create({
    btn: {
        flexDirection: 'row', alignItems: 'center', backgroundColor: '#c36e02', borderRadius: 15, padding: 15
    },
    leftImg: { height: 40, width: 40, marginRight: 30, tintColor: 'white', resizeMode: 'contain' },
    txt: { fontSize: 30, color: 'white' },
    tick: { position: 'absolute', right: 0, height: 30, width: 30, marginRight: 30, tintColor: 'white' }
});

在你要使用的页面中导入这个：

import React, { useState } from 'react';
import Radio from '../../components/Radio';
import { View } from 'react-native';
export default function parent() {
  const [radioValue, setRadioValue] = useState(false);
  return <View style={{ flex: 1, paddingVertical: 70, paddingHorizontal: 20 }}>
    <Radio
      value={radioValue}
      changeValue={() => setRadioValue(!radioValue)}
      leftImage={require('../../assets/images/wallet-bottom.png')}
      text="Monthly Basis"
    />
  </View>
}

在leftImage 中传递将显示在左侧的图像。

在text 中传递将显示为电台标题的文本。

在value 中传递布尔类型的状态。

在changeValue 中传递一个改变布尔状态的函数。

输出

【讨论】：