Question

最近我解决了页面之间导航的问题，但是现在我无法通过反应导航将数据从FlatList传递到另一个屏幕

导航发生但从不传递数据。我在App.js中同时包括CatalogScreen和PDFScreen这两个屏幕。初始屏幕出现了，没有问题，但是我想将变量传递到另一个屏幕，以便我可以从远程服务器通过该变量查询获取一些其他数据。但是，无论我到目前为止从文档和示例中所做的任何尝试，它始终失败。

App.js

connect

主屏幕（在App.js中）

import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import Ionicons from 'react-native-vector-icons/Ionicons';
var CatalogList = require('./catalogFlatList');
import {  SafeAreaView, createStackNavigator } from 'react-navigation';
import { ReactiveTest } from "rx";
import PDFExample from "./catalogPDF";

class CatalogScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed6b21' }}>
        <CatalogList navigation={this.props.navigation}/>
      </SafeAreaView>
    );
  }
}
class PDFScreen extends React.Component {
  render () {
    const { navigation } = this.props;
    const qtext = navigation.getParam('qtext', 'NO-ID');
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed621' }}>
        <PDFExample />
      </SafeAreaView>
    )
  }
}
const RootStack = createStackNavigator(
  {
    Home: CatalogScreen,
    Details: PDFScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

详细信息屏幕->最终屏幕

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator, StyleSheet, Dimensions, TouchableOpacity } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";

class FlatListDemo extends Component {
  constructor(props) {
    super(props);
    .. some working code here ..
    return (
  render() {
    const { navigate } = this.props.navigation;   
    return (
        <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
          <FlatList
            data={this.state.data}
            renderItem={({ item }) => (
              <TouchableOpacity onPress={() => {this.props.navigation.navigate('Detais', {qtext:`${item.first}`})}}>
              <ListItem
                title={item.first}
                subtitle={item.email}
                containerStyle={{ borderBottomWidth: 0 }}
              />
              </TouchableOpacity>
            )}
            keyExtractor={item => item.name}
            ItemSeparatorComponent={this.renderSeparator}
            ListHeaderComponent={this.renderHeader}
            ListFooterComponent={this.renderFooter}
          />
        </List>
    );
  }
}

export default FlatListDemo;
module.exports = FlatListDemo;

Answer 1

navigation prop仅传递给您在ReactRouter中配置的组件屏幕。 PDFExample未被用作屏幕，因此不会获得navigation作为道具。您可以从navigation显式传递整个PDFScreen对象，也可以仅向其传递qtext值：

class PDFScreen extends React.Component {
  render () {
    const { navigation } = this.props;
    const qtext = navigation.getParam('qtext', 'NO-ID');
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: '#ed621' }}>
        <PDFExample
          navigation={navigation}
          qtext={qtext}
        />
      </SafeAreaView>
    )
  }
}

无法通过反应导航从FlatList传递数据

1 个答案: