react-native - 如何使用 FlatList 创建多个开关? [英] react-native - How to use FlatList to create multiple switches?

问题描述

我想要一个包含多个开关的列表，以便为用户创建一个活动列表，然后选择/检查"他们是否对一个或多个感兴趣.

I want to have a list of multiple switches to essentially create a list of activities for the user to then "select/check" if they are interested in one or more.

我的计划是使用 switch 作为 Flatlist 的 renderItem，但我在两件事上遇到了麻烦.

My plan was to use a switch as the renderItem of a Flatlist, but I am having trouble with two things.

1) 当它在 Flatlist 中时，我无法让开关保持打开状态.我曾经让它工作过，但后来搞砸了.

1) I can't get the switch to stay toggled on when it is in the Flatlist. I had it working at one point but messed it up since.

2) 当它工作时，所有的开关会一起切换.

2) When it was working, all the switches would toggle together.

任何帮助将不胜感激！

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View, Switch } from 'react-native';

class InterestsList extends Component {
  constructor() {
    listKeys = [
      {key: 'Basketball'},
      {key: 'Football'},
      {key: 'Baseball'},
      {key: 'Soccer'},
      {key: 'Running'},
      {key: 'Cross Training'},
      {key: 'Gym Workout'},
      {key: 'Swimming'},
    ];

    super();
    this.state = {
       switchValue: false
    }
  }

  toggleSwitch = (value) => {
    this.setState({switchValue: value})
    console.log('Switch is: ' + value)
  }

  listItem = ({item}) => (
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
      <Text style={styles.item}>{item.key}</Text>
      <Switch
        onValueChange={(value) => this.setState({switchValue: value})}
        value={this.state.switchValue}
      />
    </View>
  );

  render() {
    return (
      <FlatList
        data={listKeys}
        renderItem={this.listItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

export default InterestsList;

推荐答案

你可以试试这个:

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View, Switch } from 'react-native';


class InterestsList extends Component {
  constructor() {
    super();
    this.state = {
       listKeys: [
      {key: 'Basketball', switch : false},
      {key: 'Football', switch : false},
      {key: 'Baseball', switch : false},
      {key: 'Soccer', switch : false},
      {key: 'Running', switch : false},
      {key: 'Cross Training', switch : false},
      {key: 'Gym Workout', switch : false},
      {key: 'Swimming', switch : false},
    ]
    }
  }

  setSwitchValue = (val, ind) => {
      const tempData = _.cloneDeep(this.state.listKeys);
      tempData[ind].switch = val;
      this.setState({ listKeys: tempData });
  }

  listItem = ({item, index}) => (
    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
      <Text style={styles.item}>{item.key}</Text>
      <Switch
        onValueChange={(value) => this.setSwitchValue(value, index)}
        value={item.switch}
      />
    </View>
  );

  render() {
    return (
      <FlatList
        data={this.state.listKeys}
        renderItem={this.listItem}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

export default InterestsList;

这篇关于react-native - 如何使用 FlatList 创建多个开关?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！