1

我对 React Native 很陌生，但我已经成功地制作了一个小应用程序，它只包含 2 个使用react-navigation库的不同屏幕。

我的问题是，当我尝试使用 UI 库 UI-Kitten 时，我的应用程序无法加载。我很肯定图书馆没有任何问题，而是我的代码有问题。

这是我的 App.js：

import React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout, Text, Button } from 'react-native-ui-kitten';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { fadeIn, fromTop, fromBottom, zoomIn, zoomOut } from 'react-navigation-transitions';

class HomeScreen extends React.Component {
  render() {
    return (
      <Layout style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </Layout>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <Layout style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'black' }}>
        <Text style={{color: 'white'}}>Details Screen</Text>
        <Button
          title='Back home'
          color='white'
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </Layout>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        title: 'Home',
        header: null
      },
    },
    Details: {
      screen: DetailsScreen,
      navigationOptions: {
        title: 'Details',
        header: null
      },
    },
  },
  {
    initialRouteName: 'Home',
    transitionConfig: () => zoomIn(),
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

这会在尝试启动时输出此错误： https ://pastebin.com/ygWFcgD0 （长）

感谢您对此问题的任何帮助或意见！

4

1 回答 1

1

您没有正确配置 UI 库。该设置在文档中进行了概述。
即看mapping和theme道具，以及ApplicationProvider.

import React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/application.component';

export default App = () => (
  <ApplicationProvider 
    mapping={mapping}
    theme={lightTheme}
    <Application/>
  </ApplicationProvider>
);
于 2019-06-17T18:10:15.893 回答