Question

我在github上找到了这个小型图书馆。我想对它做一些改变。如何在单选按钮（此组件）中添加支持样式对象的文本？因此，当在其他屏幕上使用它时，可以在其中实现任何文本并更改默认样式。目前它甚至不包括默认文本实现。这是代码。

import React, { Component } from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import { View } from 'react-native-animatable'
import PropTypes from 'prop-types'

const DEFAULT_SIZE_MULTIPLIER = 0.7
const DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER = 0.2

export default class RadioButton extends Component {
  static propTypes = {
    size: PropTypes.number,
    innerColor: PropTypes.string,
    outerColor: PropTypes.string,
    isSelected: PropTypes.bool,
    onPress: PropTypes.func
  }

  static defaultProps = {
    size: 35,
    innerColor: 'dodgerblue',
    outerColor: 'dodgerblue',
    isSelected: false,
    onPress: () => null
  }

  render () {
    const { size, innerColor, outerColor, isSelected, onPress } = this.props
    const outerStyle = {
      borderColor: outerColor,
      width: size + size * DEFAULT_SIZE_MULTIPLIER,
      height: size + size * DEFAULT_SIZE_MULTIPLIER,
      borderRadius: (size + size * DEFAULT_SIZE_MULTIPLIER) / 2,
      borderWidth: size * DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER
    }

    const innerStyle = {
      width: size,
      height: size,
      borderRadius: size / 2,
      backgroundColor: innerColor
    }

    return (
      <TouchableOpacity style={[styles.radio, outerStyle]} onPress={onPress}>
        {isSelected ? <View style={innerStyle} {...this.props} /> : null}
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  radio: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center'
  }
})

如何实现上面描述的新功能？

Answer 1

如果你真的想修改它，这可能会有所帮助。

在<Text />内添加了

<RadioButton />。

见下面的评论。

import React, { Component } from 'react'
import { StyleSheet, TouchableOpacity } from 'react-native'
import { View } from 'react-native-animatable'
import PropTypes from 'prop-types'

const DEFAULT_SIZE_MULTIPLIER = 0.7
const DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER = 0.2

export default class RadioButton extends Component {
  static propTypes = {
    size: PropTypes.number,
    innerColor: PropTypes.string,
    outerColor: PropTypes.string,
    isSelected: PropTypes.bool,
    onPress: PropTypes.func,

    /// 1) Added new props
    text: PropTypes.string,
    textStyle: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number,
    ]),
  }

  static defaultProps = {
    size: 35,
    innerColor: 'dodgerblue',
    outerColor: 'dodgerblue',
    isSelected: false,
    onPress: () => null
  }

  render () {
    const { size, innerColor, outerColor, isSelected, onPress } = this.props
    const outerStyle = {
      borderColor: outerColor,
      width: size + size * DEFAULT_SIZE_MULTIPLIER,
      height: size + size * DEFAULT_SIZE_MULTIPLIER,
      borderRadius: (size + size * DEFAULT_SIZE_MULTIPLIER) / 2,
      borderWidth: size * DEFAULT_OUTER_BORDER_WIDTH_MULTIPLIER
    }

    const innerStyle = {
      width: size,
      height: size,
      borderRadius: size / 2,
      backgroundColor: innerColor
    }

    /// 2) Style for unselected radio - was null in open source
    const innerStyleUnselected = {
        ...innerStyle,
        backgroundColor: transparent,
    }

    /// 3) Put text in. Make sure inner View not null
    return (
      <TouchableOpacity style={[styles.radio, outerStyle]} onPress={onPress}>
        <View style={isSelected ? innerStyle : innerStyleUnselected}>
            <Text style={this.props.textStyle}>{this.props.text}</Text>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  radio: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center'
  }
})

Answer 2

这显示了如何让它一步一步地运作。

首先，代码：

/// 1) Make a composition component
export default class RadioButtonText extends Component {
  static propTypes = {
    /// 2) Make all RadioButton props as this classes' props
    ...RadioButton.propTypes,

    /// 3) Two new props, one for string of text, one for text style.
    text: PropTypes.string,
    textStyle: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number,
    ]),
  }

  static defaultProps = {
      ...RadioButton.defaultProps,
  }

  render() {
    return (
      <View>
        <!-- 4) Pass every props into RadioButton -->
        <RadioButton {...this.props} />
        <!-- 5) Apply text string, and style -->
        <Text style={this.props.textStyle}>{this.props.text}</Text>
      </View>
    )
  }
}

步骤：

制作合成成分。

创建除修改开源之外的新组件，以便于控制和理解。基本思路是：左侧为<RadioButton />，右侧为<Text />，一切看起来都不错。

将所有<RadioButton />道具作为此类＆＃39;道具

因此，我们可以将新组件<RadioButtonText />中的道具传递到<RadioButton />，用于size，innerColor，outerColor等每个道具。

两个新道具，一个用于文本字符串，一个用于文本样式。

这就是您的需求所需要的一切。虽然这两个道具也会传入<RadioButton />，但它根本不重要（没有效果）。

将每个道具传递到<RadioButton />
应用文字字符串和样式

用法：

<RadioButtonText
  {/* props for RadioButton */}
  size={10}
  isSelected={false}
  {/* props for RadioButtonText */}
  text='Radio Text!'
  textStyle={{fontSize: 18}}
/>

如何在这个可重用的组件中实现支持样式对象的Text？

2 个答案:

步骤：

用法：