React Native Overlay Test Error:

Question

I hope all is well! First off, I'd like to thank you for being such a great developers and supporter of the SO community - you really make a difference!

I wanted to ask you about how to solve an error I continue to encounter when using react-native-overlay.

It seems when I put the overlay tags within a touchable highlight in order to bring the nested text to the forefront of the view - I get the following error:

Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component. I have tried adding a native method within the class and that did not work (posted on another topic).

Any help would be greatly appreciated!

Here's my code so far:

/**
 * 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);

The error I get is the following:

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只有一个孩子，应该是本地的（视图，文本，图像等）。