1

私は React Native を初めて使用しますが、react-navigationライブラリを使用して 2 つの異なる画面で構成される小さなアプリを作成することに成功しました。

私の問題は、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