React native 选中另一个本机时自动取消选中复选框

我有两个复选框（来自react native元素），我们称它们为框a和框b，在这里一次只能选中其中一个（无多选），如果选中框a，则不可能选中框b。因此，到目前为止，如果我错误地勾选了框a，我需要再次单击以手动取消勾选框a，以便勾选框b。但是，我希望能够通过单击并选中框b来自动取消选中框a-如果这有意义的话

我试图研究54111540和其他问题，但这些答案似乎都无助于实现我的目标

我的代码：

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import { slider } from '../../components/SliderStyle';
import { useDispatch } from 'react-redux';
import { addfirstrole } from '../../redux/actions/index';
import store from '../../redux/store';
import * as firebase from 'firebase';

const RoleScreen = ({ navigation }) => {

const dispatch = useDispatch()
const addFirstRole = firstRole => dispatch(addfirstrole(firstRole))

const [landlordChecked, setLandlordChecked ] = useState(false)
const [tenantChecked, setTenantChecked] = useState(false)

const user = firebase.auth().currentUser

return (
  <View>
    <Text>Role screen</Text>
    <CheckBox
      title='Jeg er utleier'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={landlordChecked}
      onPress={tenantChecked ? () => setLandlordChecked(false) : () => setLandlordChecked(!landlordChecked)}
    />
    <CheckBox
      title='Jeg er leietaker'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={tenantChecked}
      onPress={landlordChecked ? () => setTenantChecked(false) : () => setTenantChecked(!tenantChecked)}
    />
    <TouchableOpacity onPress={() => { navigation.navigate('Search'); addFirstRole(user.uid); console.log(store.getState()); }}>
      <View style={slider.buttonStyle}>
        <Text style={slider.textStyle}>Neste</Text>
        <Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
      </View>
    </TouchableOpacity>
  </View>
 )
} 

const styles = StyleSheet.create({})

export default RoleScreen;

import React，{useState}来自“React”；
从“react native”导入{View，Text，StyleSheet，TouchableOpacity，}；
从“react native elements”导入{CheckBox}；
从“@expo/vector icons”导入{Ionicons}；
从“../../components/SliderStyle”导入{slider}；
从'react redux'导入{useDispatch}；
从“../../redux/actions/index”导入{addfirstrole}；
从“../../redux/store”导入存储；
从“firebase”导入*作为firebase；
常量RoleScreen=（{navigation}）=>{
const dispatch=usedpatch（）
const addFirstRole=firstRole=>dispatch（addFirstRole（firstRole））
const[landordchecked，setlandordchecked]=useState（false）
const[tenatchecked，settnantchecked]=useState（false）
const user=firebase.auth（）.currentUser
返回(
角色筛选
setlandordchecked（false）：（）=>setlandordchecked（！landordchecked）}
/>
setTenantChecked（false）：（）=>setTenantChecked（！tenatchecked）}
/>
{navigation.navigate（'Search'）；addFirstRole（user.uid）；console.log（store.getState（））；}>
巢穴
)
} 
constyles=StyleSheet.create（{}）
导出默认角色屏幕；

试试这个，它会帮你的

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import { CheckBox } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import { useDispatch } from 'react-redux';
import * as firebase from 'firebase';

const RoleScreen = ({ navigation }) => {

const [landlordChecked, setLandlordChecked ] = useState(false)
const [tenantChecked, setTenantChecked] = useState(false)

return (
  <View>
    <Text>Role screen</Text>
    <CheckBox
      title='Jeg er utleier'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={landlordChecked}
      onPress={landlordChecked ? () => setLandlordChecked(false) : () => [setLandlordChecked(true),setTenantChecked(false)]}
    />
    <CheckBox
      title='Jeg er leietaker'
      checkedIcon='dot-circle-o'
      uncheckedIcon='circle-o'
      checked={tenantChecked}
      onPress={tenantChecked ? () => setTenantChecked(false): () => [setTenantChecked(true),setLandlordChecked(false)]}
    />
  </View>
 )
} 

const styles = StyleSheet.create({})

export default RoleScreen;

import React，{useState}来自“React”；
从“react native”导入{View，Text，StyleSheet，TouchableOpacity，}；
从“react native elements”导入{CheckBox}；
从“@expo/vector icons”导入{Ionicons}；
从'react redux'导入{useDispatch}；
从“firebase”导入*作为firebase；
常量RoleScreen=（{navigation}）=>{
const[landordchecked，setlandordchecked]=useState（false）
const[tenatchecked，settnantchecked]=useState（false）
返回(
角色筛选
SetLandOrdChecked（false）：（）=>[SetLandOrdChecked（true），SetnantChecked（false）]的
/>
setTenantChecked（false）：（）=>[setTenantChecked（true），SetLandorChecked（false）]
/>
)
} 
constyles=StyleSheet.create（{}）
导出默认角色屏幕；

---

根据您的要求进行更改。无需怀疑

这是如何在选中其他值时取消选中其他值

这是我们用onPress调用的函数

数据3.checked为真或假 data3.filterx.id是筛选器id

onPress的声明是

{data4.map((item) => {
          return (
            <TouchableOpacity
              style={{
                flexDirection: "row",
                alignItems: "center",
              }}
              key={item.filterx.id}
              onPress={() => handleChange4(item.filterx.id)}
            >
              <CheckBox checked={item.checked} />
              <Text>{item.filterx.title}</Text>
            </TouchableOpacity>
          );
        })}


const handleChange3 = (id) => {
 
    let temp = data3.map((data3) => {
      if (id === data3.filterx.id) {
        return { ...data3, checked: !data3.checked };
      }
      return data3;
    });

    for (var i = 0; i < data3.length; i++) {
      data3[i].checked = false;
    }
    data3.checked = true;

    console.log(temp);
    setdata3(temp);
  };

{data4.map（（项）=>{
返回(
handleChange4（item.filterx.id）}
>
{item.filterx.title}
);
})}
常量handleChange3=（id）=>{
让temp=data3.map（（data3）=>{
if（id==data3.filterx.id）{
返回{…data3，选中：！data3.checked}；
}
返回数据3；
});
对于（变量i=0；i

这不是一种广播团体行为吗？