如何使用组件内的按钮更改选项卡

Question

最初的免责声明，我是 react/react-native 和 Expo 的新手，所以我的代码目前不是最好的。

所以，我有一个带按钮的 class 组件，它在我的应用程序的 2 个不同屏幕中使用，我希望该按钮可以更改当前选项卡。

在我的 App.js 中，我正在创建一个底部标签栏，如下所示：

import * as React from 'react';
import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as Font from 'expo-font';

//------------ Components ---------//
import HomeView from './components/HomeView.jsx';
import PesquisarView from './components/PesquisarView.jsx';
import RulesView from './components/RulesView.jsx';
import AboutView from './components/AboutView.jsx';




const Tab = createBottomTabNavigator();

export default class App extends React.Component {
    state = {
        assetsLoaded: false,
    };

async componentDidMount() {
    await Font.loadAsync({
        'Amanise': require('./assets/fonts/amanise/Amanise.otf'),
        'PTSans-Regular': require('./assets/fonts/PT_Sans/PTSans-Regular.ttf'),
        'PTSans-Bold': require('./assets/fonts/PT_Sans/PTSans-Bold.ttf'),
    });
    this.setState({ assetsLoaded: true });
}

render() {
    const { assetsLoaded } = this.state;

    if (assetsLoaded) {

        return (
            <NavigationContainer>
                <Tab.Navigator
                    screenOptions={({ route }) => ({
                        tabBarIcon: ({ focused, color, size }) => {
                            let iconName;
                            if (route.name === 'Home') {
                                iconName = focused
                                    ? 'ios-home'
                                    : 'ios-home';
                            } else if (route.name === 'Search') {
                                iconName = focused ? 'ios-search' : 'ios-search';
                            } else if (route.name === 'Rules') {
                                iconName = focused ? 'ios-flag' : 'ios-flag';
                            } else if (route.name = 'About') {
                                iconName = focused ? 'ios-information-circle-outline' : 'ios-information-circle-outline';
                            }
                            // You can return any component that you like here!
                            return <Ionicons name={iconName} size={size} color={color} />;
                        },
                    })}
                    tabBarOptions={{
                        activeTintColor: 'lightblue',
                        inactiveTintColor: 'gray',
                        labelStyle: {
                            fontSize: 12,
                            padding: 2,
                        }
                    }}
                // initialRouteName="Pesquisar"
                >
                    <Tab.Screen name="Home" component={HomeView} />
                    <Tab.Screen name="Search" component={PesquisarView} />
                    <Tab.Screen name="Rules" component={RulesView} />
                    <Tab.Screen name="About" component={AboutView} />
                </Tab.Navigator>
            </NavigationContainer>
        );
    } else {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: "center",
                    alignContent: 'center',
                    flexDirection: "row",
                    justifyContent: "space-around",
                    padding: 10
                }}
            >
                <ActivityIndicator
                    size="large"
                />
            </View>
        );
    }
}

}

在主屏幕内，我有一个内部有 Touchable 的组件，可以将选项卡更改为名为“搜索”的选项卡。

这是主屏幕

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

//----components
import CarouselDestaque from './CarouselDestaque.jsx';
import MapZoomLocation from './MapZoomLocation.jsx';
import InputPesquisa from './InputPesquisa.jsx';

class HomeView extends Component {
    constructor(props) {
        super(props);
    }


    render() {
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.divMapa}>
                    <MapZoomLocation />
                </View>
                <View style={styles.divDestaques}>
                    <InputPesquisa parent="Home" /* obterFiltro={this.getFiltros.bind(this)} */ />
                    <View style={styles.divTextoDestaques}>
                        <Text style={styles.textDestaque}>Destaques</Text>
                    </View>
                    <CarouselDestaque/>
                </View>
            </SafeAreaView>
        );
   }

有Touchable的组件是这个：

import React, { Component } from 'react';
import { View, TextInput, TouchableHighlight, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

//----- styles
// import styles from '../styles/styles.js';

class InputPesquisa extends Component {

constructor(props) {
    super(props);
    this.state = {
        showImage: true,
    };
}

toggleImage() {
    if (this.state.showImage == true) {
        this.setState({ showImage: false })
    } else {
        this.setState({ showImage: true })
    }
}


render() {
    return (
        <View style={styles.divPesquisa}>
            <Ionicons style={styles.searchIcon} name="ios-search" size={30} color="grey" />

            <TextInput
                onFocus={this.toggleImage.bind(this)}
                onBlur={this.toggleImage.bind(this)}
                style={this.state.showImage == true && this.props.parent == 'Home' ? styles.inputPesquisaComImagem : styles.inputPesquisaSemImagem}
                placeholder="Pesquisar praia"
                placeholderTextColor='lightgrey'
            ></TextInput>
            {
                this.state.showImage == true && this.props.parent == 'Home' ?
                    <TouchableOpacity
                        style={styles.optionIcon}
                    >
                        <Ionicons name="ios-options" size={30} color="grey" />
                    </TouchableOpacity>
                    : null
            }

        </View>
    );
}

所以我的问题是，如何在按下组件中的 Touchable 后更改我所在的选项卡？我试过这个解决方案，但没有用。

<TouchableOpacity
    style={styles.optionIcon}
    onPress={() => this.props.navigation.navigate('Search')}
>
    <Ionicons name="ios-options" size={30} color="grey" />
</TouchableOpacity>

提前致谢！

Answer 1

屏幕 InputPesquisa 不是任何导航器的一部分

所以你必须在主屏幕中传递如下导航道具

<InputPesquisa parent="Home" navigation={this.props.navigation}/>

这会将导航道具从主屏幕传递到 InputPesquisa，您可以使用它来切换选项卡。

如何使用组件内的按钮更改选项卡

How to change tab with a button inside a component

reactjs

react-native

react-navigation

expo

react-navigation-bottom-tab