Question

官方网站中显示的复选框（scriptFile）仅支持Android。

我们如何在react-native中实现复选框，而iOS和Android均可支持该复选框？

Answer 1

您可以尝试使用NativeBase（https://docs.nativebase.io/Components.html#checkbox-headref）的<CheckBox />组件它应该在两个平台上都可以工作。

示例：

 <CheckBox 
    checked={this.state.checked}
    onPress={()=>this.setState({ checked: !this.state.checked})}
  />

Answer 2

const CheckBox = (props) => {
  const {name, value, isChecked} = props;
  return (
    <View>
      <TouchableHighlight
        onPress={() => {
          props.function(value);
        }}
        underlayColor="transparent"
        style={styles.checkBoxRowAlign}>
        {isChecked ? (
          <View>
            <View>
              <FastImage
                source={require('../assets/images/checkbox_Tick.png')}
              />
            </View>
          </View>
        ) : (
          <View>
            <View/>
          </View>
        )}
      </TouchableHighlight>
      <Text>{name}</Text>
    </View>
  );
};

export default CheckBox;

这就像一个自定义复选框，如果我们在你的应用程序中添加上面的代码，如果你想在任何地方使用它，你只需要导入文件并像使用它

    import CheckBox from '../../CheckBox';
        <CheckBox isChecked={isChecked} name={item.name} value={item.value} function={this.onclickCheckBox} />


 onclickCheckBox(value) {
   your logic.........
  }

Answer 3

Step1：在形成要映射到您的 FlatList 的列表时，映射列表并添加一个布尔标志以保持 Checkbox 选择的状态。

Step2：将 Checkbox 的值设置为存储在从 FlatList 呈现的项目中的标志，并且 onValueChange 传递索引并更改数组相应索引的标志值。

Step3：映射在 FlatList 中呈现的数组并将每个项目推送到初始化的新数组/临时数组并将临时数组设置为您的实际数组。这解决了 Android 中的问题，并且在同一个渲染中复选框完全正常工作。

第一步：

const [responseList, setResponseList] = useState([])

   response.data= response.data.map(item => {
        item.isSelect = false;
        return item;
      });
      setResponseList(response.data)

步骤 2：

 <FlatList style={styles.flatView}
      data={responseList}
      renderItem={({ item, index }) => (
              <View style={styles.checkboxContainerList}>
                <CheckBox
                  boxType='square'
                  value={item.isSelect}
                  onValueChange={() => {
                    setData(index)
                  }}
                  tintColor={'grey'}
                  onCheckColor={colorTheme}
                  onFillColor='white'
                  onTintColor={colorTheme}
                  tintColors={{ true: colorTheme }}
                  style={styles.checkboxView}
                />

              </View>
        )}

      keyExtractor={(item, index) => index.toString()}

    />

第三步：

function setData(index) {
var isSelected = responseList[index].isSelect
responseList[index].isSelect = !isSelected

let doc = []
responseList.map(item => {
  doc.push(item)
})
setResponseList(doc)
  }

更详细的描述和完整的代码 https://github.com/ritzblogs/reactnative-FlatListCheckbox

Answer 4

如果您正在寻找一种纯粹在React Native中呈现布尔值的方法，则可以尝试switch，如下所示：

<Switch value={item.selected} onValueChange={selected => this.setState({selected })/>

一个开关呈现如下：

否则，如果您正在寻找一个复选框，则可以尝试React Native Elements库。像这样：

import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

如何在React-native中实现复选框，在Flatlist中同时支持iOS和Android

4 个答案: