react-native - 如何在堆栈导航中创建从父组件到子组件的传递状态值

Question

嘿伙计们，我目前在将状态值从 Stack Navigator 的父组件传递到子组件时遇到问题。
我的父组件:

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View, StyleSheet, FlatList } from 'react-native';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';
import Navigator from './routes/stack.js';

let customFonts = {
  'Jost_400Regular': require('./assets/fonts/Jost_400Regular.ttf'),
  'Jost_600SemiBold': require('./assets/fonts/Jost_600SemiBold.ttf'),

};
    

export default class App extends React.Component {
  state = {
    fontsLoaded: false,
    cardInfo: [],
  };

  async _loadFontsAsync() {
    await Font.loadAsync(customFonts);
    this.setState({ fontsLoaded: true });
    const response = await fetch('https://umamiapp.herokuapp.com/');
    const jsonresponse = await response.json();
    let tempImages = [];

    for (let i = 0; i < jsonresponse.length; i++) {
        tempImages.push(jsonresponse[i]);
    }
     
    this.setState({
      cardInfo : tempImages
    });
  }

  componentDidMount() {
    this._loadFontsAsync();
  }
  renderCards = () => {
    console.log(this.state.cardInfo);
    return (
    <View>
        <Navigator />
    </View>)
  }
  render() {
    if (this.state.fontsLoaded) {
      return (
        <FlatList 
          style={styles.container}
          data={[1]}
          renderItem={this.renderCards}
        />
      );
    } else {
      return <AppLoading />;
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  },
});

我的导航页面:

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Cards from '../components/Cards.js';
import CardCommentPage from '../components/CardCommentPage.js';

const screens = {
  Cards: {
    screen: Cards,
  },
  CardCommentPage: {
    screen: CardCommentPage,
  },
};

// home stack navigator screens
const stack = createStackNavigator(screens);

export default createAppContainer(stack);

我希望能够从父组件的状态传递 cardInfo 数组作为导航页面中 Cards 组件的 Prop ，并且在查看文档时迷路了。我想知道这是否可能。谢谢你。

Answer 1

我不确定我是否理解你的问题，但也许你正试图通过 cardInfo在 Flatlist 中声明您的项目，对吗？
如果是这样，这里是问题，由 renderItem 渲染的组件FlatList 是 PureComponent，它在 props 改变时不会更新。期间_loadFontsAsync您设置 fontsLoaded: true这使得 FlatList 呈现，但此时，您的 cardInfo仍然是空的，直到您的 api 响应和响应时，您的 cardInfo已更新，但 PureComponent 将不会进行任何进一步的 Prop 更改，因此这是导致您出现问题的原因。
这是解决方案，幸运的是，FlatList 确实为我们提供了一个属性，该属性将在 props 更改时考虑组件是否应该更新。路过 cardInfo进入 extraData ，你的 FlatList 项目应该知道这个 Prop 。

<FlatList
   ....
   extraData={this.state.cardInfo}
/>

这是文档 FlatList-extraData