React Native 自定义切换按钮组件

Question

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

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

我也希望能够在价格上传递一秒variable/string

除上述内容外，如果我可以发送 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: '.95'},{label: 'Medium', price: '.95'}]}
        onChange={(option) => {
          console.log(option);
        }}
      />

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

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

React Native 自定义切换按钮组件

React Native custom toggle button component

react-native

radio-button

components

toggle

custom-controls