Как я могу передать реквизиты (данные и функции) в tabNavigator, который находится на родительском экране? - PullRequest
Новая
       41

Как я могу передать реквизиты (данные и функции) в tabNavigator, который находится на родительском экране?

0 голосов
/ 25 марта 2020

Причина, по которой я пытаюсь передать реквизиты с родительского экрана, заключается в том, что я могу получить данные API и передать их раз и навсегда на все экраны внутри tabNavigator. Большая часть информации извлекается и передается без особых усилий (хотя я немного обеспокоен будущей масштабируемостью). Проблема в том, что я не могу передать функции от родителя TabScreens через screenProps, например, я пытаюсь включить их в screenProps следующим образом: screenProps={{resData: this.state.resData, filterToggle: this.filterToggle}}. Но это приводит к: * TypeError: _this.props.filterToggle не является функцией. (в 'this.props.filterToggle (index)', '_this.props.filterToggle' не определено) *

PD: я пропустил бит 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);

в моем меню Tab я пытаюсь получить доступ к функции следующим образом: <TouchableOpacity onPress={()=>this.props.filterToggler(index)}>

...