React Native には、タブ ナビゲーションを使用していくつかのタブを制御したいボタン グループがあります。
タブページはすべて持っていてtabBarVisible: false
、呼び出しなどで正しいタブページに移動したいのですが、ボタングループから呼び出されたnavigate('screen1')
内部では機能にアクセスできません。 updateTab
onpress
navigation.navigate
私に何ができる?
import { TabNavigator } from 'react-navigation';
const Tabpage = TabNavigator(
{
tab1: {
screen: screen1,
navigationOptions: {
tabBarVisible: false,
tabBarLabel: 'Screen 1'
}, ...
}
export default class Tab extends React.Component {
constructor(props) {
super(props);
this.state = {
tabIndex: 2
};
this.updateTabIndex = this.updateTabIndex.bind(this);
}
updateTabIndex = tabIndex => {
console.log(tabIndex);
this.setState({ tabIndex });
switch (tabIndex) {
case 0:
console.log('nearby chosen');
// navigate('screen1'); // error: no function named navigate
// navigation.navigate('screen1'); // error: not a function
// this.navigate or this.navigation.navigate all fail too
break;
case 1: // etc.
default: // etc.
}
}
render() {
<View style={styles.tabsview}>
<ButtonGroup
containerBorderRadius={40}
selectedBackgroundColor='#FF0000'
onPress={ this.updateTabIndex }
selectedIndex={this.state.tabIndex}
buttons={['screen0', 'screen1', 'screen2']}
containerStyle={{ height: 30 }}
/>
</View>
変更された状態のタブのインデックスからナビゲーションにアクセスするにはどうすればよいですか?