React Native 中的自定义单选按钮

Question

我正在尝试使用 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;

我正在尝试使用此代码。

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

Answer 1

使用以下代码作为组件：

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中传递一个boolean类型的状态。

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

输出

Answer 2

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

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

React Native 中的自定义单选按钮

Custom Radio Button In React Native

radio-group

radio-button

react-native