I new beginners in React Native and my problem cannot detect tab index change when click 1 tabbar.

Component TabView

export default class TabViewExample extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 1, title: 'Title 1' },
      { key: 2, title: 'Title 2' },

    ],
  };

  _handleIndexChange = (index) => this.setState({ index });

  _renderTabBar = (props) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);

    return (
      <View style={styles.tabBar}>
        {props.navigationState.routes.map((route, i) => {
          const opacity = props.position.interpolate({
            inputRange,
            outputRange: inputRange.map((inputIndex) =>
              inputIndex === i ? 1 : 0.5
            ),
          });

          return (
            <TouchableOpacity
              style={styles.tabItem}
              onPress={() => this.setState({ index: i })}>
              <Animated.Text style={{ opacity }}>{route.title}</Animated.Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };

  

  _renderScene = SceneMap({
    1:()=><DetailScreen idQuestion={1}/>,
    2:()=><DetailScreen idQuestion={2}/>,
    
  });

  

  render() {
    
    
      const renderTabBar = props => {
        return (
          <TabBar
            {...props}
            renderLabel={({ focused, route }) => {
              return (
                <TextView
                  size={20}
                  category="Medium"
                  color={focused ? '#05EADE' : '#05DBEA'}>
                  {route.title}
                </TextView>
              );
            }}
            indicatorStyle={styles.indicatorStyle}
            style={styles.tabBar}
          />
        );
      };  
      
    return (
      <ScrollView style={{marginTop: StatusBar.currentHeight,
        flex: 1,}} contentContainerStyle={{ flexGrow: 1 }} pagingEnabled={true}>
        <TabView
          showPageIndicator={true}
          navigationState={this.state}
          renderScene={this._renderScene}
          initialLayout={{initialLayout}}
          style={{flex: 1}}
          renderTabBar={props => (
            <TabBar
              {...props}
              indicatorStyle={{ backgroundColor: 'white' }}
              tabStyle={{ width: 100 }}
              scrollEnabled={true}
              style={{ backgroundColor: '#0568EA' }}
              
            />
          )}
          onIndexChange={this._handleIndexChange}
        />
      </ScrollView>
    );
  }
}

But I cannot detect value load when clicked on Tabbar.So It will load all data when I clicked any Tabbar.

Code for DetailScreen

render() {
      
      axios.get(`http://192.168.1.9:3000/api/driver/`+this.props.idQuestion)
      .then((result) => {
        console.log('id',this.props.idQuestion); 
        this.setState({
          answers: result.data[0].Answer,
          question:result.data[0].Question,
          isCorrect:result.data[0].isCorrect,
        });
       
        
      })
      .catch(error => console.log(error));

      return (
        
        

        <View>
        <Text style={styles.question}>{this.state.question}</Text>  
        {
          
        this.state.answers.map((val) => {
          
          return (
            
            <View  style={styles.container} key={val.id}>
            <TouchableOpacity key={val.id}
            style={
                this.textStyle(val.id)
            }
            onPress={() => this.setState({userOption:val.id})}>
              <View style={styles.radius}>
                
                {
                  val.id == this.state.userOption ?
                    <View style={{
                      height: 12,
                      width: 12,
                      borderRadius: 6,
                      backgroundColor: '#000',
                    }} />
                    : null
                }
              </View>
                
                <Text style={styles.answer}>{val.id}/ {val.name}</Text>
              </TouchableOpacity>
         
            </View>
            
          )
          
        })
        
      
      }
        <View style={{height:40,backgroundColor:'blue',borderColor:'white',flexDirection:'row',margin:15,}}>
          <Text style={{fontSize:20,margin:5,color:'white',}}>Blue: Correct</Text>
        </View>
        <View style={{height:40,backgroundColor:'red',borderColor:'white',flexDirection:'row',margin:15,}}> 
          <Text style={{fontSize:20,margin:5,color:'white'}}>Red: InCorrect</Text>
        </View>
      </View>
      );
}

Please help me how i can detect status change and get only 1 idQuestion. It helps better the performance.

THanks for your help!