v1到v3迁移，嵌套选项卡

Question

我开发React Native应用程序已经一年多了，我一直在使用v1，从未更新过它。

"反应导航"："^1.5.11"，

该应用程序运行良好，正在被用户使用。现在我有了一些喘息的时间，我决定从v1升级到v3。

在v1中，我做了这样的事情，

const FacilitySearchTabs = TabNavigator({
Property: {
screen: PropertyTab,
navigationOptions: {
tabBarLabel: I18n.t('tabTitleProperty')
}
},
Building: {
screen: BuildingTab,
navigationOptions: {
tabBarLabel: I18n.t('tabTitleBuilding')
}
}
}, {
...
});
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<View style={styles.container}>
<CustomSearchBar
onChangeText={this.setSearchPhrase}
onSubmitEditing={this.onSearchPress}
placeholder={I18n.t('searchEntities')} />
<FacilitySearchTabs
screenProps={{
navigation: this.props.navigation,
searchPhrase: this.state.searchPhrase,
onDrillDownPress: this.onDrillDownPressCallback,
onItemPress: this.onItemPressCallback,
selectedEntityId: selectedEntity.FmEntityId
}} />
</View>
</SafeAreaView>

我这样做是因为在我的UI中只有一个搜索输入，它可以根据用户输入同时过滤掉每个选项卡中的所有列表。因此，无论用户是向左还是向右滑动标签，搜索输入都保持不变。

当然，在v3中，我认为我所要改变的只是TabNavigator的创建方式，但我得到了以下错误，

不变冲突：不变冲突：导航道具是此导航器缺少。在react导航3中，您必须设置应用程序容器。更多信息：https://reactnavigation.org/docs/en/app-containers.html

我已经设置了我的应用程序容器，所以这不是问题所在，我知道它是如何工作的，这是用户通过初始屏幕后的屏幕。

仔细阅读错误，我做了以下更改，

<Tabs navigation={this.props.navigation} />

并开始出现不同的错误。

TypeError:TypeError:在导航状态下找不到"路由"。你是不是尝试将React组件的导航道具传递给Navigator小孩看见https://reactnavigation.org/docs/en/custom-navigators.html#navigator-导航道具

我已按照https://reactnavigation.org/docs/en/custom-navigators.html#navigator-导航道具，错误已经消失，但我的选项卡没有出现。这是我的世博会点心上的代码。

import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
Button,
StatusBar,
StyleSheet,
View,
} from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
import AllTab from './allTab';
import BuildingsTab from './buildingsTab';
const Tabs = createMaterialTopTabNavigator({
All: AllTab,
Buildings: BuildingsTab,
});
export default class FacilitySearchScreen extends React.Component {
static navigationOptions = {
title: 'Facility Search',
};
static router = {
...Tabs.router,
getStateForAction: (action, lastState) => {
// check for custom actions and return a different navigation state.
return Tabs.router.getStateForAction(action, lastState);
},
};
render() {
return (
<View style={styles.container}>
<Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
<Tabs navigation={this.props.navigation} />
</View>
);
}
_signOutAsync = async () => {
await AsyncStorage.clear();
this.props.navigation.navigate('Auth');
};
_drillDownEntity = () => {
this.props.navigation.navigate('EntityDrillDown');
};
_selectEntityAsync = async () => {
await AsyncStorage.setItem('entityId', '123');
this.props.navigation.navigate('App');
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

，我有两个问题

1. 为什么选项卡没有出现，以及如何修复
2. 有没有更好的方法可以更好地实现我上面解释的UI/UX

这是我为此制作的一种小吃。如果有人愿意调查并帮助我解决这个问题，我将非常感激。在App.js中有一段注释的代码，它将帮助您入门。

Answer 1

这是一个样式问题。我非常专注于react导航模块，我没有想到造型可能是个问题。它已经修复，我将把零食的链接留给未来探索v3的人。