1

我正在尝试使用 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

4

2 回答 2

0

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

于 2017-05-19T15:12:00.653 回答
0

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

于 2017-06-14T14:23:19.297 回答