繁体   English   中英

反应本机覆盖测试错误:

[英]React Native Overlay Test Error:

我希望一切都好! 首先,我要感谢您是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

所有Touchable只有一个孩子,应该是本地的(视图,文本,图像等)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM