I’m a new beginners in React Native and my problem cannot detect tab index change when click 1 tab bar.
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 if i clicked tabbar. It helps better the performance.
Thanks for your help!