最初的免责声明，我是 react/react-native 和 Expo 的新手，所以我的代码目前不是最好的。
所以，我有一个带有按钮的类组件，它在我的应用程序的 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>
提前感谢！