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的创建方式，但出现以下错误，

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

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

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

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

并开始出现其他错误。

TypeError：TypeError：在导航状态下未找到“路线”。你是否尝试将React组件的导航道具传递给导航器儿童？看到 https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop

我已按照https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop上的说明进行操作，错误已消失，但我的标签没有出现。这是我的世博小吃的代码。

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

我有2个问题，

为什么这些选项卡不显示以及如何解决？
是否有更好的方法可以更好地实现与上面说明的相同的UI / UX？

Here是我为此创建的小吃。如果有人愿意研究它并帮助我解决这个问题，我将非常感激。 App.js中有一段注释的代码，可以帮助您入门。

Answer 1

这是一个样式问题。我非常专注于react-navigation模块，没有想到样式可能是问题。它是固定的，对于将来浏览v3的任何人，我将保留指向小吃的链接。

从v1到v3的迁移，嵌套的标签页

1 个答案: