React Native顶部标签导航中的数据传递问题

你的问题核心是没有把OrganizerProfile页面的item数据传递给Tab导航下的子组件，只要给每个Tab页面传递参数，就能在子组件里拿到对应的数据。

步骤1：给Tab页面传递参数 #

在OrganizerProfile的Tab.Screen配置中，通过initialParams把组织者数据传递给每个子页面：

<Tab.Navigator
  screenOptions={{
    // 你的样式配置
  }}>
  <Tab.Screen
    name="About"
    component={OrganizerAbout}
    initialParams={{ organizer: item }} // 传递组织者数据
  />
  <Tab.Screen 
    name="Event" 
    component={OrganizerEvents} 
    initialParams={{ organizer: item }} // 传递组织者数据
  />
  <Tab.Screen
    name="Reviews"
    component={OrganizerReviews}
    initialParams={{ organizer: item }} // 传递组织者数据
  />
</Tab.Navigator>

步骤2：在子组件中接收并使用数据 #

以OrganizerAbout为例，从route.params中取出传递的组织者数据，然后渲染简介内容：

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

const OrganizerAbout = ({ route }) => {
    const { organizer } = route.params;
    return (
        <View style={{paddingHorizontal:0, paddingTop:20, flex:1,  backgroundColor: '#fff'}}>
            {/* 渲染组织者简介 */}
            {organizer.about && <Text style={{paddingHorizontal:16}}>{organizer.about}</Text>}
        </View>
    )
}

export default OrganizerAbout
const styles = StyleSheet.create({})

同样的方式，在OrganizerEvents组件中可以用organizer.events来渲染活动列表，在OrganizerReviews中用organizer.reviews渲染评论数据。

额外注意 #

要确保你从上游传递过来的item对象中，确实包含about、events、reviews这些字段，如果是从接口获取的数据，需要确认接口返回了这些内容。

内容的提问来源于stack exchange，提问作者MST intern 2