react-native-tab-view 从反应导航屏幕跳转到特定标签
react-native-tab-view jump to specific tab from react navigation screen
我有 2 个导航库。 React 导航 v5 和 react-native-tab-view。来自 React 导航的 3 个选项卡:Home/Discover/Profile。 Discover 是一个带有 React Native 选项卡视图的屏幕。我在主页中有几个按钮,按下它们后它们应该将我导航到“发现”选项卡和“选项卡视图”中的特定选项卡。现在,我使用 React 导航实现了从 Home 到 Discover 的导航。但是如何在导航到“发现”后跳转到特定选项卡?
这是 Home 中的一个元素,它包含将我从 Home 导航到 Discover 的按钮:
render() {
const { error, pending, refresh, videos } = this.props;
return (
<HomeViewItem
headerText={'Top Videos'}
footerText={'More Videos'}
navigate={() =>
this.props.navigation.navigate('TabNavigator', {
screen: 'Discover',
}) // this will navigate me to Discover
}
view={this._renderVideos(videos, pending, error, refresh)}
/>
);
}
这是“发现”屏幕中的选项卡视图:
export default class DiscoverTabView extends React.Component<DiscoverProps> {
_StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
_NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
_VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />;
_RedditRoute = () => <RedditTabScreen navigation={this.props.navigation} />;
_PicturesRoute = () => (
<PicturesTabScreen navigation={this.props.navigation} />
);
state = {
index: 0,
routes: [
{ key: 'streams', title: 'Streams' },
{ key: 'news', title: 'News' },
{ key: 'videos', title: 'Videos' },
{ key: 'reddit', title: 'Reddit' },
{ key: 'pictures', title: 'Pictures' },
],
};
_handleIndexChange = (index: number) => this.setState({ index });
componentWillUpdate() {}
render() {
const renderTabBar = (
props: SceneRendererProps & { navigationState: State }
) => (
<TabBar
{...props}
indicatorStyle={{ bottom: 6 }}
style={{ backgroundColor: '#0C2B33', elevation: 0, shadowOpacity: 0 }}
scrollEnabled={true}
renderLabel={renderLabel}
renderIndicator={renderIndicator}
tabStyle={{ width: 87, height: 44 }}
/>
);
const renderLabel = ({
route,
focused,
color,
}: {
route: Route;
focused: boolean;
color: String;
}) => {
return (
<View style={{ width: 87, height: 44 }}>
<Text style={focused ? styles.active : styles.inactive}>
{route.title}
</Text>
<Image
source={
route.key === this.state.routes[this.state.routes.length - 1].key
? null
: images.tabViewSeparator
}
style={{ position: 'absolute', alignSelf: 'flex-end', top: 10 }}
/>
<Image
source={
focused ? images.tabViewIconActive : images.tabViewIconInactive
}
style={{
width: 20,
height: 20,
alignSelf: 'center',
position: 'absolute',
top: 21,
}}
/>
</View>
);
};
return (
<TabView
lazy={false}
navigationState={this.state}
renderScene={SceneMap({
streams: this._StreamsRoute,
news: this._NewsRoute,
videos: this._VideosRoute,
reddit: this._RedditRoute,
pictures: this._PicturesRoute,
})}
renderTabBar={renderTabBar}
onIndexChange={this._handleIndexChange}
initialLayout={{ width: Dimensions.get('window').width }}
/>
);
}
}
您可以使用特定的选项卡操作来完成:jumpTo.
函数如下:
import { TabActions } from '@react-navigation/native';
const jumpToAction = TabActions.jumpTo("TabName", { params });
navigation.dispatch(jumpToAction);
我有 2 个导航库。 React 导航 v5 和 react-native-tab-view。来自 React 导航的 3 个选项卡:Home/Discover/Profile。 Discover 是一个带有 React Native 选项卡视图的屏幕。我在主页中有几个按钮,按下它们后它们应该将我导航到“发现”选项卡和“选项卡视图”中的特定选项卡。现在,我使用 React 导航实现了从 Home 到 Discover 的导航。但是如何在导航到“发现”后跳转到特定选项卡?
这是 Home 中的一个元素,它包含将我从 Home 导航到 Discover 的按钮:
render() {
const { error, pending, refresh, videos } = this.props;
return (
<HomeViewItem
headerText={'Top Videos'}
footerText={'More Videos'}
navigate={() =>
this.props.navigation.navigate('TabNavigator', {
screen: 'Discover',
}) // this will navigate me to Discover
}
view={this._renderVideos(videos, pending, error, refresh)}
/>
);
}
这是“发现”屏幕中的选项卡视图:
export default class DiscoverTabView extends React.Component<DiscoverProps> {
_StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
_NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
_VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />;
_RedditRoute = () => <RedditTabScreen navigation={this.props.navigation} />;
_PicturesRoute = () => (
<PicturesTabScreen navigation={this.props.navigation} />
);
state = {
index: 0,
routes: [
{ key: 'streams', title: 'Streams' },
{ key: 'news', title: 'News' },
{ key: 'videos', title: 'Videos' },
{ key: 'reddit', title: 'Reddit' },
{ key: 'pictures', title: 'Pictures' },
],
};
_handleIndexChange = (index: number) => this.setState({ index });
componentWillUpdate() {}
render() {
const renderTabBar = (
props: SceneRendererProps & { navigationState: State }
) => (
<TabBar
{...props}
indicatorStyle={{ bottom: 6 }}
style={{ backgroundColor: '#0C2B33', elevation: 0, shadowOpacity: 0 }}
scrollEnabled={true}
renderLabel={renderLabel}
renderIndicator={renderIndicator}
tabStyle={{ width: 87, height: 44 }}
/>
);
const renderLabel = ({
route,
focused,
color,
}: {
route: Route;
focused: boolean;
color: String;
}) => {
return (
<View style={{ width: 87, height: 44 }}>
<Text style={focused ? styles.active : styles.inactive}>
{route.title}
</Text>
<Image
source={
route.key === this.state.routes[this.state.routes.length - 1].key
? null
: images.tabViewSeparator
}
style={{ position: 'absolute', alignSelf: 'flex-end', top: 10 }}
/>
<Image
source={
focused ? images.tabViewIconActive : images.tabViewIconInactive
}
style={{
width: 20,
height: 20,
alignSelf: 'center',
position: 'absolute',
top: 21,
}}
/>
</View>
);
};
return (
<TabView
lazy={false}
navigationState={this.state}
renderScene={SceneMap({
streams: this._StreamsRoute,
news: this._NewsRoute,
videos: this._VideosRoute,
reddit: this._RedditRoute,
pictures: this._PicturesRoute,
})}
renderTabBar={renderTabBar}
onIndexChange={this._handleIndexChange}
initialLayout={{ width: Dimensions.get('window').width }}
/>
);
}
}
您可以使用特定的选项卡操作来完成:jumpTo.
函数如下:
import { TabActions } from '@react-navigation/native';
const jumpToAction = TabActions.jumpTo("TabName", { params });
navigation.dispatch(jumpToAction);