Question

我一直在尝试在我的应用程序中实现React-native-navigation，但似乎无法使其正常工作。

我的App.js：

UPDATE a
SET LatestOrderedItem = b.OrderedItem,
    LatestOrderDate = b.PurchaseDate
FROM TableA a
     INNER JOIN TableB b ON a.CustomerID = b.CustomerID
WHERE NOT EXISTS (SELECT 1
                  FROM TableB b2
                  WHERE b2.CustomerID = b.CustomerID
                    AND b2.PurchaseDate > b.PurchaseDate);

和我的Navigator.js

import React from 'react';
import Navigator from './src/components/Navigator'


class App extends React.Component {

  render() {
    return (
      <React.Fragment>
        <Navigator />
      </React.Fragment>
    );
  }
}

export default App;

现在，该应用程序已加载并可以访问我的App.js。但是，它似乎不显示导航器中的任何内容。我知道它找到它是因为我遇到了路径错误等问题。

我缺少什么明显的缺陷？

Answer 1

此处的两个不同项目之间可能会有一些混淆。您要实施的是来自React Navigation的内容。还存在React Native Navigation，它是Wix的一个独立项目。

您的导入中存在一些不一致之处，使我怀疑导入失败（../screens/Homescreen中没有大写的'S'，../screens/Login中没有'Screen'）。并且您应该删除App中的Navigator导入。

这是一个可行的示例，它基于我对您要实现的目标所做的一些假设。请注意，对于最新版本的react-navigation-material-bottom-tabs，我需要添加依赖项：

@react-navigation/core
@react-navigation/native
react-native-paper
react-native-screens

YMMV。我测试了一个新的裸react-native init应用。我还需要使用React Navigation的createAppContainer。

import React from 'react'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'
import { createAppContainer } from '@react-navigation/native'
import Icon from 'react-native-vector-icons/Ionicons'

import LoginScreen from '../screens/LoginScreen'
import HomeScreen from '../screens/HomeScreen'

const Navigator = createMaterialBottomTabNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-home' : 'ios-home-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-stats' : 'ios-stats-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },

  {
    shifting: false,
    backBehavior: 'initialRoute',
    initialRouteName: 'Login',
    activeColor: 'white',
    tabBarColor: 'blue',
    inactiveTintColor: 'black',
    barStyle: { backgroundColor: 'orange' },
    swipeEnabled: true
  }
)

export default createAppContainer(Navigator)

React-Native导航不显示？

1 个答案: