javascript - 使用 JSX 和 React Native 的动态标签名称

Question

这个问题的灵感来自这个问题:Dynamic tag name in jsx and React但这一次是针对 React Native 的。

我正在尝试渲染 <TouchableOpacity> iOS 按钮和 <TouchableNativeFeedback> Android 按钮，没有成功。

我尝试了以下代码:

render() {
    const { element } = this.props;

    const ButtonElementName = Platform.OS === 'ios' ? 'TouchableOpacity' : 'TouchableNativeFeedback';

    return (
      <ButtonElementName style={styles.sectionEntryContainer}>
        <View style={styles.sectionDayContainer}>  
          <LinearGradient
            style={styles.gradientStyle}
            start={{x: 0, y: 0}} end={{x: 1, y: 0}}
            colors={COLOR_MAP[element.item.data.mood].colors}
          >
            <Text style={styles.sectionDayText}>{ moment(element.item.day, 'D').format('Do') }</Text>
          </LinearGradient>
        </View>
        <View style={styles.sectionDayDescriptionContainer}>
          <Text style={styles.sectionDayText}>{ element.item.data.optionalDescription }</Text>
        </View>
      </ButtonElementName>
    );
  }

但是在iOS模拟器上尝试时出现以下错误:

Invariant Violation: View config not found for name TouchableOpacity

如果不创建 HOC，我该如何去做呢？

Answer 1

不应通过名称引用元素，而应直接通过类引用元素

import {
  TouchableNativeFeedback,
  TouchableOpacity
} from 'react-native';

const Element = Platform.OS === 'ios' ? TouchableOpacity : TouchableNativeFeedback;

class SomeComponent extends React.Component {

  render() {
    const { element } = this.props;

    return (
      <Element style={styles.sectionEntryContainer}>
        <View style={styles.sectionDayContainer}>  
          <LinearGradient
            style={styles.gradientStyle}
            start={{x: 0, y: 0}} end={{x: 1, y: 0}}
            colors={COLOR_MAP[element.item.data.mood].colors}
          >
            <Text style={styles.sectionDayText}>{ moment(element.item.day, 'D').format('Do') }</Text>
          </LinearGradient>
        </View>
        <View style={styles.sectionDayDescriptionContainer}>
          <Text style={styles.sectionDayText}>{ element.item.data.optionalDescription }</Text>
        </View>
      </Element>
    );
  }
}