passProps 抛出“调用 RCTEventEmiter.receiveTouches 时出错”（react-native-navigation）答案

【问题标题】：passProps throws 'Error calling RCTEventEmiter.receiveTouches' (react-native-navigation)passProps 抛出“调用 RCTEventEmiter.receiveTouches 时出错”（react-native-navigation）
【发布时间】：2017-10-11 16:29:09
【问题描述】：

我正在尝试使用 react-native-navigation pacakage 1.1.65 (https://github.com/wix/react-native-navigation) 将一些数据传递到模态屏幕

我有两个案例：

第一个

export default class SearchTab extends Component {
  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dicoDataSource: ds.cloneWithRows(realm.objects('User')),
        searchText:'',
        data:[]
  }
}

onPressButton() {
var resultData = this.state.data;
  if(resultData.length > 0){
        console.log("RESULTDATA", resultData);
        this.props.navigator.showModal({
          title: "Modal",
          screen: "App.SearchResult",
          passProps: {
            result: resultData,
          }
        });
  }
}

当我点击按钮时，它会触发我这个错误：

'调用 RCTEventEmiter.receiveTouches 时出错'

日志“RESULTDATA”类似于一个或多个项目：

    RESULTDATA', { '0': 
        { id: 1,
          name: 'Leanne Graham',
          username: 'Bret',
          email: 'Sincere@april.biz' 
} }

第二个

export default class SearchTab extends Component {
  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dicoDataSource: ds.cloneWithRows(realm.objects('User')),
        searchText:'',
        data:[]
  }
}

onPressButton() {
var resultData = this.state.data;
  if(resultData.length > 0){
        console.log("RESULTDATA", resultData);
        this.props.navigator.showModal({
          title: "Modal",
          screen: "App.SearchResult",
          passProps: {
            result: resultData.name, <== HERE THE ONLY DIFFERENCE
          }
        });
  }
}

使用此代码，显示模式屏幕，但当我登录 this.props.result 时，它显示 undefined。

  componentDidMount(){
    console.log("PROPS", this.props.result);
  }

我想使用这些数据在模态屏幕中创建一个运行良好的 ListView。

不知道该怎么办。我已经单独测试了一些 UI 元素并使用上述不同的组合。

我想让第一个工作。

任何建议都将受到高度赞赏。

编辑

没人吗？

编辑 2

这里是我的 SearchResult 类：

import React, {Component} from 'react';
import {
  TextInput,
  View,
  TouchableOpacity,
  StyleSheet,
  TouchableHighlight,
  Text,
  Button
} from 'react-native';
import realm from '../realmDB/realm';
import { ListView } from 'realm/react-native';
import {Navigation} from 'react-native-navigation';
import EStyleSheet from 'react-native-extended-stylesheet';

export default class SearchResult extends Component {
  static navigatorStyle = {
    leftButtons: [{
      title: 'Close',
      id: 'close'
    }]
  };
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        resultDataSource: ds.cloneWithRows(this.props.result),
        searchText:'',
        data:[]
    }
  }

renderRow(rowData, sectionId, rowId, highlightRow){
    return(
      <View style={styles.row}>
        <Text style={styles.rowText}>{rowData.username}</Text>
      </View>
    )
  }

  render() {
      return (
        <View style={styles.container}>
          <TextInput style = {styles.searchText}
            placeholder="Type your research"
            autoCorrect={true}
            returnKeyLabel="search"
            underlineColorAndroid="black"
            placeholderTextColor="black"
            value = {this.state.searchText}
            onChange={this.setSearchText.bind(this)}
          />
          <TouchableOpacity onPress = {() => this.onPressButton(this.state.searchText)}>
            <Text style={styles.button}>SEARCH</Text>
          </TouchableOpacity>
          <ListView
          navigator={this.props.navigator}
          enableEmptySections={true}
          dataSource={this.state.resultDataSource}
          renderRow={this.renderRow.bind(this)}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          />
        </View>
      );

我也在这里打开一个问题：https://github.com/wix/react-native-navigation/issues/1249

【问题讨论】：

标签： android react-native react-native-navigation

【解决方案1】：

确保在屏幕组件中渲染时将“结果”道具从“App.SearchResult”传递到“SearchTab”组件。

【讨论】：

什么意思？我尝试将“结果”从“SearchTab”传递给“SearchResult”，而不是相反。我真的不明白:)
@KSoze 分享App.SearchResult屏幕组件的代码。在渲染SearchTab 的屏幕组件中，您必须将result 对象作为道具传递。
查看我的第二次编辑

【解决方案2】：

好的，这不是上下文丢失问题。这是关于我使用的数据结构。我必须制作嵌套对象才能传递数据。我试图传递 react-native-navigation 包不允许的错误数据格式/结构。只能传递一个对象

【讨论】：