Question

我试图从父屏幕传递道具的原因是，我可以获取API数据，并将其一劳永逸地传递给tabNavigator中的所有屏幕。大多数信息可以轻松获取和传递（尽管我对未来的可伸缩性有些担心）。问题是我似乎无法通过screenProps将函数从父级传递到TabScreens，例如，我尝试将它们包含在screenProps中，例如：screenProps={{resData: this.state.resData, filterToggle: this.filterToggle}}。但这导致：* TypeError：_this.props.filterToggle不是函数。（在'this.props.filterToggle（index）'中，'_ this.props.filterToggle'未定义）*

P.D：我跳过了获取Api位，仅通过该函数就可以了，这是我的问题。

ParentScreen：========================================

export default class ReanTest extends Component {
constructor(props) {
super(props);
this.state = {
    isLoading:true,
    refreshing:true,
    resData: {},
    prevActiveFilterIndex: 0,
};}

 filterToggler = (index) => {
    let categoryfilter = [...this.state.resData];
    categoryfilter.menus.categorias[this.state.prevActiveFilterIndex].active = false;
    categoryfilter.menus.categorias[index].active = true;
    this.setState({ resData: categoryfilter, prevActiveFilterIndex: index});
  }

  render() {
    {this.state.isLoading == false ? (
   console.log(this.state.resData.cover.md))
   : null}
    return (
        <View style={{flex:1}}>
            {
              !this.state.isLoading? 
                <TabLayout 
                  style={{backgroundColor:'#ffffff', marginTop:100}} 
                  screenProps={{resData: this.state.resData, filterToggler: this.filterToggler}}
                  /* filterToggle={this.filterToggler} */
                />
                : null
            }
        </View>
    );
  }
}

TabNAvigator结构（仍在父屏幕内）===========================

const TabNavigator = createMaterialTopTabNavigator({
    Menu: {
      screen: MenuScreen,
      navigationOptions: {
        tabBarLabel: "Menu"
      }
    },
    Informacion: {
      screen: InformacionScreen,
      navigationOptions: () => ({
        tabBarLabel: "Informacion",
        headerStyle: {
            backgroundColor:'#ffffff'
        }
      })
    },

    Reservar: {
      screen: ReservarScreen,
      navigationOptions: {
        tabBarLabel: "Reservar"
      }
    },
    Promos: {
        screen: PromosScreen,
        navigationOptions: {
          tabBarLabel: "Promos"
        }
      },
      Calificaciones: {
        screen: CalificacionesScreen,
        navigationOptions: {
          tabBarLabel: "Calificaciones"
        }
      }
  },
  {
    tabBarOptions: {
    indicatorStyle: {
        backgroundColor: '#000000',
     },
    activeTintColor: '#DB8741',
    inactiveTintColor: '#444444',
    scrollEnabled:true,
    upperCaseLabel: true, 
    tabStyle:{
        width:'auto',
        backgroundColor:'#ffffff',
        marginHorizontal:0,
    },
    labelStyle:{
        fontSize:12,
        fontWeight:'bold'
    },
    style:{
        position:'relative',
        top:80,
        right:0,
        left:0
    }
    }

  },
  );

  const TabLayout = createAppContainer(TabNavigator);

在我的menuTab屏幕中，我试图像这样访问该功能： <TouchableOpacity onPress={()=>this.props.filterToggler(index)}>

如何将道具（数据和函数）传递到父屏幕内的tabNavigator那？

0 个答案: