React Native 自定义切换按钮组件

Question

我一直在开发一个类似于单选按钮的自定义组件，但现在有一些关于如何扩展它的问题。

我希望能够通过样式表设置 TouchableOpacity 样式，由于它的动态特性，该样式表当前是内联的。

我还希望能够通过价格传递第二个变量/字符串。

如果我可以通过 2 个变量发送上述内容，这些变量将通过 firebase/props 发送，那么我将如何公开它们。

组件

import React, { Component } from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import styles from './Styles/OptionStyle'

export default class Option extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeOption: this.props.options[0],
    };
  }
  updateActiveOption = (activeOption) => {
    this.setState({
      activeOption,
    });
  };
  render() {
    return (
      <View style={styles.container}>
        {this.props.options.map((option, index) => (
          <TouchableOpacity key={index} style={styles.button}
            onPress={() => {
              this.props.onChange(option);
              this.updateActiveOption(option);
            }}
          >
            <Text
              style={{
                width: 100,
                borderWidth: 1,
                borderColor: this.state.activeOption === option ? '#4caf50' : 'rgb(117, 117, 118)',
                borderRadius: 6,
                height: 100,
                padding: 10,
                color: this.state.activeOption === option ? '#4caf50' : 'rgb(117, 117, 118)'
              }}
            >
              {option}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

调用组件

<Option
            options={['Small','Medium','Large']}
            onChange={(option) => {
              console.log(option);
            }}
          />

这是我希望能够为每个选项传递 2 个变量的地方，即 Small 和 $3.95 或 Medium 和 $4.95

Answer 1

您可以通过 props 传递对象数组，然后在组件中使用它们。像这样的：

<Option
        options={[{label: 'Small', price: '$3.95'},{label: 'Medium', price: '$4.95'}]}
        onChange={(option) => {
          console.log(option);
        }}
      />

然后在您的组件中简单地迭代它，例如使用 map：

{this.props.options.map((option, index) => (
 <TouchableOpacity><Text>{option.label} - {option.value}</Text></TouchableOpacity>
))}