Реагировать на встроенную навигацию по вкладкам управления нажатием кнопки - PullRequest
Новая
       28

Реагировать на встроенную навигацию по вкладкам управления нажатием кнопки

0 голосов
/ 14 мая 2019

Как я могу перейти на конкретную вкладку при нажатии на кнопку. Я выбираю вкладки из API. Все вкладки, содержащие только один экран с разными данными

1 Ответ

0 голосов
/ 14 мая 2019

Если вы используете react-navigation, вы можете просто использовать 

this.props.navigation.navigate('Name_of_Tab')

Подробнее об этом можно прочитать здесь

Ниже приведен код рабочего примера,Внизу вы найдете ссылку на закуску, показывающую, что она работает.

App.js 

import React from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
    };
  }

  render () {
    return (
      <AppContainer />
    );
  }
}

MainNavigation.js 

import Screen1 from './Screen1';
import Screen2 from './Screen2';

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

// create TabNavigator
const screens = {
  Tab1: {
    screen: Screen1
  },
  Tab2: {
    screen: Screen2
  }
};

const config = {
  headerMode: 'none',
  initialRouteName: 'Tab1'
};


const TabNavigator = createBottomTabNavigator(screens, config);
export default createAppContainer(TabNavigator);

Screen1.js 

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen extends React.Component {

  onPress = () => {
    this.props.navigation.navigate('Tab2') // this will navigate to Tab2
  }

  render () {
    return (
      <View style={styles.container}>
        <Text>Tab 1</Text>
        <Button title={'Switch tab'} onPress={this.onPress} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Screen2.js 

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen extends React.Component {

  onPress = () => {
    this.props.navigation.navigate('Tab1') // this will navigate to Tab1
  }

  render () {
    return (
      <View style={styles.container}>
        <Text>Tab 2</Text>
        <Button title={'Switch tab'} onPress={this.onPress} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Вот это в закуске, так что вы можете увидеть, как она работает:

https://snack.expo.io/@andypandy/navigating-to-new-tab

...