passProps 抛出 'Error calling RCTEventEmiter.receiveTouches' (react-native-navigation)

Question

我正在尝试使用 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,
          }
        });
  }
}

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

'Error calling 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

这是我的搜索结果 class:

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

我这里也开个issue：https://github.com/wix/react-native-navigation/issues/1249

Answer 1

确保在屏幕组件中渲染时将 'result' 道具从 'App.SearchResult' 传递到 'SearchTab' 组件。

Answer 2

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

passProps 抛出 'Error calling RCTEventEmiter.receiveTouches' (react-native-navigation)

passProps throws 'Error calling RCTEventEmiter.receiveTouches' (react-native-navigation)

android

react-native

react-native-navigation

第一个

第二个