React Native 覆盖测试错误：

Question

希望一切都好！首先，我要感谢您成为如此出色的开发人员和 SO 社区的支持者 - 您真的很重要！

我想问你如何解决我在使用 react-native-overlay 时不断遇到的错误。

似乎当我将覆盖标签放在可触摸的突出显示中以便将嵌套文本带到视图的最前面时 - 我收到以下错误：

Invariant Violation：Touchable child 必须是原生的或将 setNativeProps 转发到原生组件。我尝试在类中添加一个本地方法，但没有成功（发布在另一个主题上）。

任何帮助将不胜感激！

这是我目前的代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var Overlay = require('react-native-overlay');

var {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableHighlight, 
  AppRegistry
} = React;

var styles = StyleSheet.create({
  container: {
    marginTop: 0,
    flex: 1
  },
  buttonText: {
    fontSize: 24,
    color: 'white',
    alignSelf: 'center',
  },
  bgImage: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'stretch',
    resizeMode: 'cover',
  },
});

class App extends React.Component{

   makeBackground(btn){
    var obj = {
      flexDirection: 'row',
      alignSelf: 'stretch',
      justifyContent: 'center',
      flex: 1, 
      backgroundColor: "#020202",
      opacity: 0.3,
    }

    return obj;
  }
  goToProfile(){
    console.log('Going to Profile');
  }
  goToRepos(){
    console.log('Going to Repos');
  }
  goToNotes(){
  console.log('Going to Notes');
  }
render(){
  return (
      <View style={styles.container}>
        <Image source={{uri: 'http://s3.amazonaws.com/rapgenius/1365796760_TommieSmithAP276.jpg'}} style={styles.bgImage} >
          <TouchableHighlight
              style={this.makeBackground(0)}
              onPress={this.goToProfile.bind(this)}
              underlayColor="#88D4F5">
                 <Overlay>
                  <Text style={styles.buttonText}>Causes</Text>
                 </Overlay>
          </TouchableHighlight>
        </Image>
        <Image source={{uri: 'http://a57.foxnews.com/global.fncstatic.com/static/managed/assets/876/493/baltimore%20suspect%20injured.jpg?ve=1&tl=1'}} style={styles.bgImage}>
          <TouchableHighlight
              style={this.makeBackground(1)}
              onPress={this.goToRepos.bind(this)}
              underlayColor="#E39EBF">
                <Text style={styles.buttonText}>News</Text>
          </TouchableHighlight>
        </Image>
         <Image source={{uri: 'http://cdn.breitbart.com/mediaserver/Breitbart/Big-Government/2014/08/16/ferguson-rioter-tear-gas-AP.jpg'}} style={styles.bgImage}>
          <TouchableHighlight
              style={this.makeBackground(2)}
              onPress={this.goToNotes.bind(this)}
              underlayColor="#9BAAF3">
                <Text style={styles.buttonText}>Hashtags</Text>
          </TouchableHighlight>
        </Image>
        <Image source={{uri: 'http://www.swurvradio.com/wp-content/uploads/2015/06/Jason-Derulo-Ciara-and-Tinashe-honor-Janet-Jackson-with-a-dance-medley-at-the-BET-Awards-on-June-28-2015-in-Los-Angeles..jpg'}} style={styles.bgImage}>
          <TouchableHighlight
              style={this.makeBackground(3)}
              onPress={this.goToNotes.bind(this)}
              underlayColor="#9BAAF3">
                <Text style={styles.buttonText}>Entertainment</Text>
          </TouchableHighlight>
        </Image>
      </View>
    )
}
};

AppRegistry.registerComponent('App', () => App);

我得到的错误如下：

Error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component
 stack: 
  ensureComponentIsNative                                      index.ios.bundle:35696
  React.createClass.componentDidMount                          index.ios.bundle:35353
  CallbackQueue.assign.notifyAll                               index.ios.bundle:5332
  ReactNativeReconcileTransaction.ON_DOM_READY_QUEUEING.close  index.ios.bundle:16113
  ReactNativeReconcileTransaction.Mixin.closeAll               index.ios.bundle:6636
  ReactNativeReconcileTransaction.Mixin.perform                index.ios.bundle:6577
  batchedMountComponentIntoNode                                index.ios.bundle:8012
  Object.ReactDefaultBatchingStrategy.batchedUpdates           index.ios.bundle:15893
  Object.batchedUpdates                                        index.ios.bundle:5095
 URL: undefined
 line: undefined
 message: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native componenthandleException @ ExceptionsManager.js:62

Answer 1

所有 Touchable 只有一个孩子，它应该是原生的（视图、文本、图像等）。