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个变量的地方，即小和$ 3.95或中等和$ 4.95

Answer 1

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

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

然后在你的Component中简单地迭代它，例如map：

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

React Native自定义切换按钮组件

1 个答案: