Javascript 如何通过导航将数据传递到平面列表中？

我正在从一个有JSON文件的API获取数据，我正在尝试将数据从app传递到appstack，再传递到SessionStack，SessionStack会将数据带到主页，当前我的控制台。日志告诉我，我的数据只会到达appstack

应用程序

import {AppStack} from '@miniclementine:navigation/AppStack';
import Colors from '@miniclementine:common/appearance/Colors';

const DATA = "https://cg0wsrc3ue.execute-api.us-east-1.amazonaws.com/dev/getSessions"

const App: () => React$Node = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(DATA)
      .then((response) => response.json())
      .then((json) => setData(json.sessions))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
      console.log("the data: ", data)
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      { isLoading ? <ActivityIndicator /> : <AppStack data={data}/> }
    </SafeAreaView>
  );
};

从'@miniclementine:navigation/AppStack'导入{AppStack}；
从“@miniclementine:common/appearance/Colors”导入颜色；
常量数据=”https://cg0wsrc3ue.execute-api.us-east-1.amazonaws.com/dev/getSessions"
常量应用程序：（）=>React$Node=（）=>{
const[isLoading，setLoading]=useState（true）；
const[data，setData]=useState（[]）；
useffect（（）=>{
提取（数据）
.then（（response）=>response.json（））
.then（（json）=>setData（json.sessions））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
log（“数据：”，数据）
}, []);
返回(
{正在加载？：}
);
};

应用程序堆栈

const Tab = createBottomTabNavigator();

export const AppStack = ({data}) => {
  console.log("data in appstack", data)
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MiniClementineTabBar {...props} />}>
        <Tab.Screen name="Sessions" component={SessionsStack} data={data} />
        <Tab.Screen name="Mantras" component={MantraStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

import {createStackNavigator} from '@react-navigation/stack';

import SessionsHomepage from '@miniclementine:modules/sessions/SessionsHomepage';
import SessionsListPage from '@miniclementine:modules/sessions/SessionsListPage';

export const SESSIONS_HOMEPAGE = 'SESSIONS_HOMEPAGE';
export const SESSIONS_LIST_PAGE = 'SESSIONS_LIST_PAGE';

const Stack = createStackNavigator();

export default function SessionsStack({data}) {
  console.log("data in SessionStack", data)
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name={'SESSIONS_HOMEPAGE'} component={SessionsHomepage} data={data} />
      <Stack.Screen name={'SESSIONS_LIST_PAGE'} component={SessionsListPage} data={data} />
      {/* @TODO: The two additional screens you need to create will be defined here */}
    </Stack.Navigator>
  );
}

const Tab=createBottomTabNavigator（）；
export const AppStack=（{data}）=>{
log（“appstack中的数据”，数据）
返回(
}>
);
};

会话堆栈

const Tab = createBottomTabNavigator();

export const AppStack = ({data}) => {
  console.log("data in appstack", data)
  return (
    <NavigationContainer>
      <Tab.Navigator tabBar={(props) => <MiniClementineTabBar {...props} />}>
        <Tab.Screen name="Sessions" component={SessionsStack} data={data} />
        <Tab.Screen name="Mantras" component={MantraStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

import {createStackNavigator} from '@react-navigation/stack';

import SessionsHomepage from '@miniclementine:modules/sessions/SessionsHomepage';
import SessionsListPage from '@miniclementine:modules/sessions/SessionsListPage';

export const SESSIONS_HOMEPAGE = 'SESSIONS_HOMEPAGE';
export const SESSIONS_LIST_PAGE = 'SESSIONS_LIST_PAGE';

const Stack = createStackNavigator();

export default function SessionsStack({data}) {
  console.log("data in SessionStack", data)
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name={'SESSIONS_HOMEPAGE'} component={SessionsHomepage} data={data} />
      <Stack.Screen name={'SESSIONS_LIST_PAGE'} component={SessionsListPage} data={data} />
      {/* @TODO: The two additional screens you need to create will be defined here */}
    </Stack.Navigator>
  );
}

从'@react navigation/stack'导入{createStackNavigator}；
从“@miniclementine:modules/sessions/SessionsHomepage”导入SessionsHomepage；
从“@miniclementine:modules/sessions/SessionsListPage”导入SessionsListPage；
导出const SESSIONS_HOMEPAGE='SESSIONS_HOMEPAGE'；
导出常量会话列表页面='会话列表页面'；
const Stack=createStackNavigator（）；
导出默认函数sessionstack（{data}）{
log（“SessionStack中的数据”，数据）
返回(
{/*@TODO:您需要创建的另外两个屏幕将在此处定义*/}
);
}

主页

import {ClementineIcon, SectionHeader} from '@miniclementine:common/components';
import Colors from '@miniclementine:common/appearance/Colors';

import BlueButton from '@miniclementine:common/components/BlueButton';
import DiscoverMore from '@miniclementine:common/components/DiscoverMore';

export default function SessionHomepage({navigation, data, onPress}) {
  console.log("data in HomePage", data)

  const onPressSectionHeader = ({onPress}) => {
    navigation.navigate('SESSIONS_LIST_PAGE', data)
  };

  const onPressSectionHeaderInvalid = () => {
    alert('Out of scope for this task')
  };

  const Item = ({ item }) => (
    <View style={styles.item}>
      <TouchableOpacity style={styles.viewButton} onPress={() => {openSettingsModal(item) }}>
      <Image source={item.image} style={styles.exerciseImage} />
      <View style={styles.detailSection}>
        <Text style={styles.title}>{item.title}</Text>
      </View>
        <ClementineIcon name="button-play" color={Colors.lilac} size={24} />
      </TouchableOpacity>
    </View>
  );

  const onContactPress = () => {
    Linking.openURL('mailto:alina@clementineapp.co.uk?subject=SendMail&body=Description') 
    // Note: Not supported in iOS simulator, so you must test on a device.
    // If you want to open an email client instead, I would suggest using the library react-native-email-link
  }

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.content}>
          <SectionHeader
            title="Morning Sessions"
            onPress={onPressSectionHeaderInvalid}
            textColor={Colors.Ink}
            textColorSeeAll={Colors.cornflower}
          />
          {/* <FlatList
            data={DATA}
            renderItem={({ item }) => <Item item={item} />}
            keyExtractor={(item) => item.id}
          /> */}
          <DiscoverMore 
            title="Discover more sessions" 
            onPress={onPressSectionHeaderInvalid}
            color={Colors.cornflower}
            textColor={Colors.cornflower}
          />
          <SectionHeader
            title="Pick-me-ups"
            onPress={onPressSectionHeader}
            textColor={Colors.Ink}
            textColorSeeAll={Colors.cornflower}
          />
          <DiscoverMore 
            title="Discover more sessions" 
            onPress={onPressSectionHeader}
            color={Colors.cornflower}
            textColor={Colors.cornflower}
          />
        </View>
        <View style={styles.sleepSection}>
          <Image
            source={require('../../assets/illustrations/sleep_section.png')}
            style={{height: 250, width: '100%'}}
          />
        </View>
        
          <View style={styles.sleepSection}>
            <View style={styles.content}>
              <View style={{paddingVertical: 10}}>
              <SectionHeader
                title="Sleep Sessions"
                onPress={onPressSectionHeaderInvalid}
                backgroundColor={Colors.ink}
                textColor={Colors.stone}
                textColorSeeAll={Colors.mint}
                style={{paddingHorizontal: 10}}
              />
              </View>
              <Text>test</Text>
              <DiscoverMore 
                title="Discover more sessions" 
                onPress={onPressSectionHeaderInvalid}
                color={Colors.mint}
                textColor={Colors.mint}
              />
            </View>
          </View>
        <View style={{marginTop: '20%'}}></View>
        <BlueButton title="Leave us feedback" onPress={onContactPress}/>
      </ScrollView>
    </SafeAreaView>
  );
}

从'@miniclementine:common/components'导入{ClementineIcon，SectionHeader}；
从“@miniclementine:common/appearance/Colors”导入颜色；
从“@miniclementine:common/components/BlueButton”导入蓝色按钮；
从“@miniclementine:common/components/DiscoverMore”导入DiscoverMore；
导出默认函数SessionHomepage（{导航，数据，onPress}）{
console.log（“主页中的数据”，数据）
const onPressSectionHeader=（{onPress}）=>{
导航。导航（'会话\列表\页面'，数据）
};
const onpress sectionheaderinvalid=（）=>{
警报（'超出此任务的范围'）
};
常量项=（{Item}）=>(
{OpenSettingsModel（项目）}}>
{item.title}
);
const onContactPress=（）=>{
Linking.openURL（'mailto:alina@clementineapp.co.uk？主题=发送邮件&正文=说明'）
//注意：iOS模拟器不支持，因此您必须在设备上进行测试。
//如果您想打开一个电子邮件客户端，我建议您使用library react native电子邮件链接
}
返回(
{/*  }
keyExtractor={（项）=>item.id}
/> */}
测试
);
}

---

我计划将这些数据放在主页内的一个平面列表中。

在导航中通过pros的最佳方法是使用参数。 当堆栈中加载了数据时，可以使用如下初始参数

 <Tab.Screen name="Sessions" component={SessionsStack}  initialParams={{data:data}}/>

您可以在SessionStack中访问它，如下所示 导出默认函数sessionstack（{route}）{

您也可以在嵌套的屏幕中执行此操作

---

警告：只有当数据只加载一次时，这种模式才有效，如果您正在考虑更改数据，请使用诸如react context之类的内容。

堆栈加载后，此数据会更改吗？@GuruparanGiritharan我不会更改数据，只会将其加载到一个平面列表中，并且可以对每个项目设置不同的样式请检查我的答案