React native 通过单击按钮来响应本机控件选项卡导航

单击按钮时，如何移动到特定选项卡。我正在从API获取选项卡。仅包含一个屏幕且数据不同的所有选项卡

如果使用的是

react导航

，则只需使用

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

你可以阅读更多关于它的内容

下面是一个工作示例的代码。在底部，你会找到一个链接，显示它的工作零食

App.js Screen1.js

从“React”导入React；
从“react native”导入{视图、样式表、文本、按钮}；
导出默认类屏幕扩展React.Component{
onPress=（）=>{
this.props.navigation.navigate（'Tab2'）//这将导航到Tab2
}
渲染（）{
返回(
表1
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“白色”
}
});

Screen2.js

从“React”导入React；
从“react native”导入{视图、样式表、文本、按钮}；
导出默认类屏幕扩展React.Component{
onPress=（）=>{
this.props.navigation.navigate（'Tab1'）//这将导航到Tab1
}
渲染（）{
返回(
表2
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“白色”
}
});

这是小吃里的，你可以看到它在工作：

---

完美。我正在寻找它，但在react native tabbar bottom中，但无法实现它，有参考资料吗？对不起，我从未使用react native tabbar bottom，所以我无法帮助您。

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

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

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);

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'
  }
});

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'
  }
});