Question

很长一段时间后，我就能解决清单中的所选项目。但是我没有得到我想要的东西。我需要通过onpress选择多个项目。

这是我为选择项目所做的事情，它工作正常。我需要多个物品。

请查看下面的代码

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  StatusBar ,
  TouchableOpacity,
  View,
  FlatList,
  ActivityIndicator,
  TouchableHighlight,
  PropTypes,
  Image,
  Alert,
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Front';

import {Actions} from 'react-native-router-flux';

export default class Login extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      pressed: false,
      selected_category: '',
      black: ''
    };
  }
  _handleCategorySelect = (index) => { 
    this.setState({selected_category: index}); 
  }
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  };
  izijackpotconfirm() {
      Actions.izijackpotconfirm()
  }
  componentDidMount() {
    var that = this;
    let items = Array.apply(null, Array(25)).map((v, i) => {
      return { id: i+1, index: i };
    });
    that.setState({
      dataSource: items,
    });
  }
 static navigationOptions = {
    title: "Izi Jackpot",
    headerStyle: {
      backgroundColor: "#354247"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };
    render() {

    var jackpotNumbers = [];
    let btn_class = this.state.black ? "NormalSet" : "SelectedSet";

    const textColor = this.props.selected ? 'red' : 'black';
        return(
      <View style={styles.container}>
        <View style={styles.middlecontainer}>
          <Text style={styles.logoText}>Please Select 5 Numbers and Submit</Text>
        </View>
        <FlatList
          data={this.state.dataSource}
          extraData={this.state.selected_category}
          ref={(e) => this.items = e}
          renderItem={({item}) => (
            <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
            <TouchableOpacity
              onPress={() => this._handleCategorySelect(item.index)}
              style={this.state.selected_category === item.index ?  
                 styles.pressed : styles.iziPizi}
              onHideUnderlay={() => {
                  this.setState({ pressed: false });
              }}
              onShowUnderlay={() => {
                  this.setState({ pressed: true });
              }}
              underlayColor={'gray'}
            >
                <Text style={styles.buttonText}>{ item.id}</Text></TouchableOpacity>
            </View>
          )}
          //Setting the number of column
          numColumns={5}
          keyExtractor={(item, index) => index}
        />

        <View style={styles.middlecontainer}>
         <TouchableOpacity style={styles.button} onPress={this.izijackpotconfirm} >
           <Text style={styles.buttonText}>Submit</Text>
         </TouchableOpacity>     
        </View>
      </View>

            )
    }
}
const styles = StyleSheet.create({
  container : {
    backgroundColor:'#6F9000',
    justifyContent: 'center',
    flex: 1,
    paddingTop: 30,

  },
  middlecontainer: {
    textAlign: 'center',
    alignItems: 'center',
    justifyContent :'center',
    flex:1    
  },
  signupTextCont : {
    flexGrow: 1,
    alignItems:'flex-end',
    justifyContent :'center',
    paddingVertical:16,
    flexDirection:'row'
  },
  signupText: {
    color:'rgba(255,255,255,0.6)',
    fontSize:16
  },
  signupButton: {
    color:'#ffffff',
    fontSize:16,
    fontWeight:'500'
  },
  iziPizi: {
    width: 55,
    padding: 15,
    margin: 5,
    backgroundColor: 'rgba(255,255,255,0.6)',
    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  pressed: {
    width: 55,
    padding: 15,
    margin: 5,
    backgroundColor:'#1c313a',
    borderRadius: 80,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    flex:1
  },
  button: {
    width:300,
    backgroundColor:'#1c313a',
     borderRadius: 25,
      marginVertical: 10,
      paddingVertical: 13
  },
  buttonText: {
    fontSize:16,
    fontWeight:'500',
    color:'#ffffff',
    textAlign:'center'
  },
  logoText : {
    color:'#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
    alignItems: 'center',
    justifyContent:'center',
  },
  imageThumbnail: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
  },
});

现在它应该适用于多项选择。我是全新的React Native。请让我知道怎么可能？预先感谢您的帮助。

Answer 1

您可以通过使用一个新数组来实现此目的，该数组包含所选项目的索引。

...
this.state = {
    dataSource: [],
    pressed: false,
    selected_category: '',
    black: '',
    selectedItems: []
};
...



//Render function of items
_renderItems = ({item, index}) => {

  let isSelected = this.state.selectedItems.indexOf(index) >= 0 ? true : false

   return(
      <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
        <TouchableOpacity
          onPress={() => {
             let ind = this.state.selectedItems.indexOf(index)
             let selectedItems = this.state.selectedItems
             if(isSelected && index === ind) {
               selectedItems.splice(ind, 1) 
             } else {
               selectedItems.push(index)
             }

             this.setState({selectedItems})
          }}
          style={isSelected ?  
             styles.pressed : styles.iziPizi}
          onHideUnderlay={() => {
              this.setState({ pressed: false });
          }}
          onShowUnderlay={() => {
              this.setState({ pressed: true });
          }}
          underlayColor={'gray'}
        >
            <Text style={styles.buttonText}>{ item.id}</Text> 
        </TouchableOpacity>
     </View>
   )
}

render() {
    ...

    <FlatList
       data={this.state.dataSource}
       extraData={this.state.selected_category}
       ref={(e) => this.items = e}
       renderItem={this._renderItems}
       numColumns={5}
       keyExtractor={(item, index) => index}
    />
   ...
 }

Answer 2

在代码中进行以下更改。

以此替换您的状态

this.state = { dataSource: [], pressed: false, selected_category: [], black: "" };

以此替换您的 _handleCategorySelect（）方法

 _handleCategorySelect = index => {

this.selectedArray = this.state.selected_category;

if (this.selectedArray.indexOf(index) < 0) {
  this.selectedArray.push(index);
} else {
  this.selectedArray.splice(this.selectedArray.indexOf(index), 1);
}

this.setState({ selected_category: this.selectedArray });};

为此替换 Flatlist 组件

 <FlatList
      data={this.state.dataSource}
      extraData={this.state}
      ref={e => (this.items = e)}
      renderItem={({ item, index }) => (
        <View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
          <TouchableOpacity
            style={
              this.state.selected_category.indexOf(index.toString()) >= 0
                ? styles.pressed
                : styles.iziPizi
            }
            onPress={() => this._handleCategorySelect(index.toString())}
            underlayColor={"gray"}
          >
            <Text style={styles.buttonText}>{item.id}</Text>
          </TouchableOpacity>
        </View>
      )}
      //Setting the number of column
      numColumns={5}
      keyExtractor={(item, index) => index}
    />

选择多个元素以响应平面列表中的本机onpress

2 个答案: