如何在Flatlist中支持ios和android的react-native中实现复选框

Question

官网上的CheckBox只支持Android。

我们如何在 iOS 和 Android 都支持的 react-native 中实现复选框？

Answer 1

您可以尝试使用NativeBase 的<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传递索引并更改数组相应索引的标志值。

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

第1步：

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}
/>