第一个

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

当我点击按钮时，它会向我发出此错误：

＆＃39;错误调用RCTEventEmiter.receiveTouches＆＃39;

日志＆＃34; RESULTDATA＆＃34;有一个或几个项目是这样的：

    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

Answer 1

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

Answer 2

好的，这不是一个上下文丢失的问题。这是关于我使用的数据结构。我必须创建嵌套对象才能传递数据。我试图传递一个错误的数据格式/结构，本机导航包不允许。只能传递一个对象

passProps抛出错误调用RCTEventEmiter.receiveTouches＆＃39; （反应天然导航）

第一个

第二个

2 个答案: