Question

我的应用程序中有一个带有不同选项卡的模式，用户可以在其中使用模式中的类别过滤搜索结果。现在它可以正常工作，但我只是在<TEXT>上放了一个事件，我需要一些视觉提示，例如复选框，以供选择

            {this.state.currentTab === 1 && (
              <View>                         
                <Text onPress={(text) => this.setGender(true)}>male</Text>
                <Text onPress={(text) => this.setGender(false)}>female</Text>
              </View>
            )}

如何在Android和iOS中同时使用复选框而不是<TEXT>？

Answer 1

您可以将此库用于复选框 “ react-native-circle-checkbox”

stack_list = []
        stack_dist = -1
        reuse_dist = -1
        if block in block_dict:
            reuse_dist = counter_reuse - block_dict[block]-1
            block_dict[block] = counter_reuse
            counter_reuse += 1
            stack_dist_ind= stack_list.index(block)

            stack_dist = counter_stack -stack_dist_ind - 1
            del stack_list[stack_dist_ind]
            stack_list.append(block)

        else:
            block_dict[block] = counter_reuse
            counter_reuse += 1
            counter_stack += 1
            stack_list.append(block)

        reuse_distance_2.append([block, stack_dist, reuse_dist])

示例：https://snack.expo.io/@msbot01/intrigued-marshmallows

Answer 2

您可以使用基于本机的库，该库具有更多可用于搜索过滤器的组件，并且更可靠，您可以将其设置为选中使用选中的道具，即布尔值，就像这样：

import {
  Icon,
  CheckBox,
  Spinner
} from "native-base";
 <TouchableOpacity   onPress={(text) => this.setGender(true)}       >
          <CheckBox checked ={tru}
            onPress={(text) => this.setGender(true)}                          />
  
        </TouchableOpacity>

Answer 3

使用我手动创建的此组件。它在两个平台上都呈现相同的单选按钮

const RenderRadio = (props) => {
  const {
     value, onChange, selectedValue
  } = props;
const checked = value === selectedValue;
  return (
    <TouchableOpacity
      style={{ flexDirection: 'row' }}
      onPress={() => onChange(value)}
    >
      <View
        style={{
          width: 20,
          height: 20,
          borderRadius: 10,
          borderWidth: 2,
          borderColor: '#002451',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <View
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor: checked ? '#002451' : 'white',
          }}
        />
      </View>
      <Text style={{ fontSize: 15, marginLeft: 10 }}>{value}</Text>
    </TouchableOpacity>
  );
};

用作

   <RenderRadio onChange={this.setSelectedValue} selectedValue={selectedValue} value={value}/>

并将您选择的值设置为

   setSelectedValue = (value) => {
     this.setState(selectedValue : value)
}

如何在React Native中为Android和IOS使用复选框？

3 个答案: