Question

我希望一切顺利！首先，我要感谢您成为SO社区的优秀开发者和支持者 - 您真的有所作为！

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

似乎当我将叠加标签放在可触摸的高亮区中以便将嵌套文本带到视图的最前端时 - 我收到以下错误：

不变违规：可触摸的子项必须是本机或前向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只有一个孩子，它应该是原生的（视图，文字，图像等）。

React Native Overlay测试错误：

1 个答案: