如何将数据传递到不同的屏幕

Question

我需要将数据从一个屏幕传递到另一个屏幕，加载主屏幕，然后从模拟 api 加载数据，它使用 providerData 设置状态，然后创建导航。我希望能够使用我在 ProviderOverview.js 中的 ProviderDetailScreen.js 中获得的数据

这里是 ProviderDetailsS​​creen.js

import React from 'react';
import {StatusBar, View} from 'react-native';
import ProviderOverview from './ProviderOverview';
import ProviderServicesList from './ProviderServicesList';
import NavigationbarHeaderWithExpandedImage from '../components/NavigationbarHeaderWithExpandedImage';
import TopTabbarComponent from '../components/TopTabbarComponent';
import mockApi from '../mockApi';

const ProviderDetailScreen = ({navigation, route}) => {
  const [providerData, setProviderData] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  //navigation setup
  React.useLayoutEffect(() => {
    navigation.setOptions({
      header: ({scene, previous}) => {
        return (
          <NavigationbarHeaderWithExpandedImage
            scene={scene}
            previous={previous}
            navigation={navigation}
            backgroundImage={providerData?.profile?.backgroundImage}
          />
        );
      },
    });
  }, [navigation, providerData]);

  //get results from API
  const getServices = React.useCallback(async () => {
    try {
      setLoading(true);
      const res = await mockApi.get('/Provider/Profile');
      if (res.ok && res.body.data) {
        // use this data in overview and service list
        setLoading(false);
        setProviderData(res.body.data);
      } else {
        throw new Error('Unable to retrieve profile');
      }
    } catch (error) {
      console.log(error);
    }
  }, []);
  React.useEffect(() => {
    console.warn('here');
    getServices();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <TopTabbarComponent
        items={[
          {
            title: 'Overview',
            component: ProviderOverview,
          },
          {
            title: 'Services',
            component: ProviderServicesList,
          },
          {
            title: 'Reviews',
            component: View,
          },
        ]}
      />
    </>
  );
};

export default ProviderDetailScreen;

这里是 ToTabbarComponent.js，它为 providerdetailsscreen 中的每个项目创建了一个选项卡

import React from 'react';
import {StyleSheet} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {PRIMARY, WHITE, INACTIVE_TINT_COLOR, ACCENT} from '../lib/colors';
import fonts from '../lib/fonts';
const Tab = createMaterialTopTabNavigator();

const TopTabbarComponent = ({items}) => {
  const tabs = () => {
    let tabs = [];

    //  loop to create tabs
    for (const [index, item] of items.entries()) {
      tabs.push(
        <Tab.Screen
          name={item.title}
          title={item.title}
          component={item.component}
          key={index}
        />,
      );
    }
    return tabs;
  };
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: WHITE,
        labelStyle: [styles.labelStyle, fonts.medium],
        inactiveTintColor: INACTIVE_TINT_COLOR,
        style: styles.style,
        indicatorStyle: styles.indicatorStyle,
      }}>
      {tabs()}
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBarOptions: {},
  labelStyle: {
    fontSize: 14,
  },
  indicatorStyle: {
    backgroundColor: ACCENT,
    height: 2,
  },
  style: {
    backgroundColor: PRIMARY,
  },
});

export default TopTabbarComponent;

这是 ProviderOverview.js，我想在其中使用在 ProviderDetailsS​​creen.js 中设置的数据

//WANT TO USE DATA HERE
       import React from 'react';
    import {StyleSheet, View, ScrollView, Text} from 'react-native';
    import MediumText from '../components/MediumText';
    
    const ProviderOverview = ({navigation}) => {
      return (
        <ScrollView style={styles.container}>
          <View>
            <MediumText onPress={() => navigation.push('PROVIDER_MESSAGE')}>
              Send a message
            </MediumText>
          </View>
          <View></View>
        </ScrollView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
    });
    export default ProviderOverview;

我还在学习：我尝试过的事情：

在 providerDetailsscreen 中，我尝试为每个项目设置 providerdata，我尝试使用一些字符串设置测试 var 以查看是否可以在 ProviderOverview 中获取它。但是 providerOverview 只有 Navigation 属性。

提前致谢。

Answer 1

试试这个方法

ProviderDetailsS​​creen.js

<TopTabbarComponent
        items={[
          {
            title: 'Overview',
            component: ProviderOverview,
            providerData: providerData, // set providerData to ProviderOverview
          },
          {
            title: 'Services',
            component: ProviderServicesList,
          },
          {
            title: 'Reviews',
            component: View,
          },
        ]}
      />

TopTabbar 组件

//  loop to create tabs
    for (const [index, item] of items.entries()) {
      const CompView = item.component;
      const providerData = item.providerData || {};
      
      tabs.push(
       <Tab.Screen name={item.title} title={item.title} key={index}>
         {(props) => <CompView  {...props} {...providerData} />}
       </Tab.Screen>
      );
    }

Answer 2

您可以使用导航道具 this.props.navigation.navigate('MyData', {data: data,}); https://reactnavigation.org/docs/navigation-prop/#navigate

或者将redux添加到你的项目https://redux.js.org/introduction/getting-started