Передать данные из React MaterialTopBarNavigator своим детям - PullRequest
Новая
       25

Передать данные из React MaterialTopBarNavigator своим детям

0 голосов
/ 08 октября 2019

Я новичок в React native и мне нужно решить эту проблему: мне нужно запросить сервер и получить некоторые данные, и ответ сервера дает мне данные одновременно на экран A и экран B. я попытался создать компонент класса, который отображает MaterialTopTabNavigator (представление Tab), и в конструкторе этого компонента я назвал сервер, а затем мне нужно передать все данные из состояния этого компонента класса обоим дочерним элементам (или, по крайней мере,необходимые данные для каждого)

Создание представления вкладки (JS-файл создает TopTabNavigator) 

const TabScreen = createMaterialTopTabNavigator(
    {
        'My Screen A':{screen:()=><ScreenA/>},
        'My Screen B':{screen:()=><ScreenB/>}
    })
const App = createStackNavigator({
    TabScreen: {
      screen: TabScreen,
      navigationOptions: {
        headerStyle: {
          backgroundColor: '#1A237E',

        },
        headerTintColor: '#FFFFFF',
        title: 'Formas de pontuar',
      },
    },
  });
const FormasDPontuarContainer = createAppContainer(App);
const config = require('../../config/chaves_e_constantes')
const initialState = {
  combos_instagram:[],
  regras_aplicativo:[],
  regras_instagram:[],
  loading:true
}

компонент класса (тот же JS-файл) 

export default class FormasDPontuar extends React.Component{
  constructor(){
    super()
    console.log('construtor de FormasDPontuar')
    this.state = initialState
    this.callApi()
  }
  updateState=(objJSON)=>{
    if(objJSON){
        console.log('objeto: ',JSON.stringify(objJSON))
        this.setState({data_class_a:objJSON.regrasInstagram})
        this.setState({data_class_b:objJSON.regrasAplicativo})
        this.setState({another_data_class_a:objJSON.combos_instagram})
        this.setState({loading:false})
        console.log('navigate to next screen')
        this.navigator &&
      this.navigator.dispatch(
        NavigationActions.navigate({ 'My Screen A':<ScreenA props={this.state}/> })
      )
    }
}
  callApi = ()=>{
    fetch(`${config.base_addr}formas_de_pontuar`, {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Authorization':`Bearer ${config.token}`      
      }
    })
    .then((response)=>response.json())
    .then((responseJson)=>{
      return this.updateState(responseJson)
    })
    .catch((error)=>{
      console.log(error)
    })
  }
  render(){
    let ready = this.state.loading
    // return(
    //     <FormasDPontuarContainer/>
    // )
    if(ready){
      return(
        <Loading visible={true}/>  
      )
    }else{
      return(  
        <FormasDPontuarContainer ref={nav => {
          this.navigator = nav;
          }}/>
      )
    }
  }
}

Ссылка на попытку чертежаЧтобы объяснить проблему: https://imgur.com/a/HZGuNnC

...