在顶部选项卡导航中反应本机数据传递

Question

我创建了一张活动卡。 on按下它打开事件详细信息页面。在活动详细信息页面上有活动组织者 touchableopcaity。 onPress Organizer touchableopacity，它会打开包含组织者详细信息的组织者配置文件。在此组织者页面上，我在屏幕底部创建顶部选项卡导航。

现在，在组织者个人资料页面上，我可以获取组织者数据，例如个人资料图片、姓名、关注者和关注者，但我无法在“关于顶部”选项卡中获取有关我们的组织者。与活动和评论相同。

import { StyleSheet, Text, View,TouchableHighlight } from 'react-native'
import React from 'react'



const OrganizerAbout = ({ route }) => {

    return (
        <View style={{paddingHorizontal:0, paddingTop:20, flex:1,  backgroundColor: '#fff'}}>
            
        </View>
    )
}

export default OrganizerAbout

const styles = StyleSheet.create({})

Organizer Profile Page

import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView, TouchableHighlight, FlatList } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import OrganizerAbout from './OrganizerAbout';
import OrganizerEvents from './OrganizerEvents';
import OrganizerReviews from './OrganizerReviews';

const OrganizerProfile = ({ route }) => {
    const navigation = useNavigation();
    const Tab = createMaterialTopTabNavigator();
    const { item } = route.params;
    return (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
header..
Image...
name...
followers and following...
buttons...
<View style={{ alignItems: 'center', marginTop: 10, flex: 1, marginHorizontal: 24 }}>
                <Tab.Navigator
                    screenOptions={{
                        styling...
                    }}
                >
                    <Tab.Screen
                        name="About"
                        component={OrganizerAbout}
                    />
                    <Tab.Screen 
                    name="Event" 
                    component={OrganizerEvents} 
                    />
                    <Tab.Screen
                        name="Reviews"
                        component={OrganizerReviews}
                    />
                </Tab.Navigator>
            </View>
        </View>
    )
}
export default OrganizerProfile

Answer 1

您有两种方法将数据传递到选项卡组件

您可以使用 InitialParams prop

将一些初始参数传递到屏幕

示例1：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
export default function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} initialParams={{ id: 1 }} />
      <Tab.Screen name="Settings" component={SettingsScreen} initialParams={{ id: 2 }} />
    </Tab.Navigator>
  );
}

您还可以使用

children

属性将数据传递到选项卡组件，这在导航 5 中对我有用

示例2：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
export default function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" children={props => <Home data={homeData} {...props} />} />
      <Tab.Screen name="Settings" children={props => <Settings data={settingData} {...props} />} />
    </Tab.Navigator>
  );
}