用于选择产品尺寸或颜色的类似电子商务的功能

Question

我已经尽我所能搜索了整个网络，以了解如何创建一个用于选择产品的界面，就像大多数主要电子商务应用程序（亚马逊、淘宝、shopify..）中实现的界面一样。目标是通过同时移除之前选中项的样式来高亮或更改列表中选中项的样式。我正在尝试使用 react-native 来克隆这样的功能。任何有关如何执行此操作的参考或指南将不胜感激！

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

 class Selections extends Component {

    state={
        highlighted: false,
        id: null
    }


// The purpose of this function is to set the state to the target index on press
    indexStateHandler = (i) =>{
         if(this.state.id === null){
             this.setState({
                 id: i
             })
         }else{
             this.setState({
                 id:i
             })
         }
         console.log("index: "+i)
         console.log("state: "+this.state.id)
    }

    //The purpose of this function is to set styles for the targeted index
    highlightStateHandler = (i) =>{     
        if(this.state.id === i){
            if(!this.state.highlighted){
                this.setState({
                    highlighted:true
                })
            }
            else{
                this.setState({
                    highlighted:false
                })
            }
        }  
           }

    highlightHandler = (i) =>{

        // console.log(i)
        this.indexStateHandler(i)
        this.highlightStateHandler(i)

    }


  render() {
    return (
      <View style={styles.selectionWrapper}>
        <View style={styles.label}><Text style={{color: "black"}}>{this.props.label}</Text></View>
        <View style={styles.listContainer}>
        {this.props.options.map((options, i) => (
            <TouchableOpacity onPress={()=>this.highlightHandler(i)} key={i}>
            <View style={this.state.highlighted&&this.state.id == i?styles.highlighted:styles.options} > <Text style={styles.text}>{options}</Text> </View>
            </TouchableOpacity>
              )
        )}
        </View>
      </View>
    );
  }
}

const styles= StyleSheet.create({
    selectionWrapper:{
        width: '100%',
        height: 100,
        borderWidth: 1,
        borderColor: 'red',
    },
    label:{
        flex: 1,

    }
    ,
    listContainer:{
        flex: 3,
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: 'center',
        // backgroundColor: "#7fffd4"
    },
    options:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        borderColor: "#d0b783",
        // backgroundColor: ""

    },
    text:{
        color: 'black',
        textAlign: 'center'
    },

    highlighted:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        // borderColor: "#d0b783",
        backgroundColor: "#d0b783"

    }
})
export default Selections

Answer 1

.....
.....
.....

<TouchableOpacity
style={[styles.buttonStyle,{
backgroundColor : item.id === this.state.selectedItem.id ? "red" : "blue"
}]}
>
{
...
...
}
</TouchableOpacity>

.....
.....
.....

Answer 2

查看TouchableOpacity 和TouchableHighlight 并尝试运行示例以了解它们是如何工作的。您还可以通过更改样式将它们结合起来以改变视觉变化。

    import React, { Component } from 'react' import {   AppRegistry,   StyleSheet,   TouchableOpacity,   Text,   View, } from 'react-native'

export default class App extends React.Component {   constructor(props) {
    super(props)
    this.state = {
      itemEn1: true,
      itemEn2: false,
      itemEn3: false,
    }   }

  onPress1 = () => {
    this.setState({
      itemEn1: true,
      itemEn2: false,
      itemEn3: false,
    })   } 
onPress2 = () => {
    this.setState({
      itemEn1: false,
      itemEn2: true,
      itemEn3: false,
    })   } 
 onPress3 = () => {
    this.setState({
      itemEn1: false,
      itemEn2: false,
      itemEn3: true,
    })   }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={this.state.itemEn1 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress1}>
          <Text> Item 1 </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.itemEn2 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress2}>
          <Text> Item 2 </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.itemEn3 ? styles.buttonEnabled : styles.buttonDisabled}
          onPress={this.onPress3}>
          <Text> Item 3 </Text>
        </TouchableOpacity>
      </View>
    )   } }

const styles = StyleSheet.create({ 
   container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10 
     }, 
    buttonDisabled: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginTop: 20 
    }, 
   buttonEnabled: {
    alignItems: 'center',
    backgroundColor: 'green',
    padding: 10,
    marginTop: 20  
     },  
    countContainer: {
    alignItems: 'center',
    padding: 10 
     },

})

这是通过地图功能：

export default class DataCollector extends React.Component {

  constructor(props) {
    super(props);
    this.SendBack = this.SendBack.bind(this);
  }

  SendBack(info) {
    console.log("Key is :", info);
    this.props.callback(info);
  }

  render() {
    let testData = this.props.data.map(function (articleData, index) {
      return (
        <View key={index}>
          <TouchableOpacity
            activeOpacity={0.6}
            key={index}
            onPress={() => this.callBack([articleData.id, articleData.name])}>
          </TouchableOpacity>
        </View>
      )

    }, this);

    return (
      <View>
        {testData}
      </View>
    );
  }
}

所以现在您可以访问单击的项目，并可以将其用于启用/禁用等。