Question

该问题的灵感源于以下问题：Dynamic tag name in jsx and React，但这一次是针对React Native的。

我试图为iOS渲染一个<TouchableOpacity>按钮，为Android渲染一个<TouchableNativeFeedback>按钮，但没有成功。

我尝试了以下代码：

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>
    );
  }
}

JSX和React Native的动态标签名称

1 个答案: