一、安装

//确保已安装 React Native CLI
npm un -g react-native-cli && npm i -g @react-native-community/cli

//用 Kitten 模板创建新项目
npx react-native init MyApp --template @ui-kitten/template-js

//启动应用
yarn android

二、配置路由（配置应用程序在屏幕之间导航，基于 React Navigation）

1.安装

//核心库
yarn add react-navigation
//导航器使用的依赖项
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2.要完成react-native-gesture-handlerAndroid的安装，请对MainActivity.java进行以下修改

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+        return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

3.然后将以下内容添加到条目文件的顶部，例如index.js或App.js

import 'react-native-gesture-handler';

注意：使用导航器（例如 stack navigator 堆栈导航器）时，需要按照该导航器的安装说明进行操作，以获取任何其他依赖项。 如果遇到错误“无法解析模块”，则需要在项目中安装该模块。

三、主题工具 Eva Colors

四、配置主题

1. 创建主题 context

//创建 theme-context.js 文件并粘贴以下代码
import React from 'react';

export const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});
//就React而言，context提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递道具。

//使用上面的代码，我们创建一个ThemeContext通过组件树提供有关当前主题的信息，因此任何组件都可以使用它。主题上下文的当前值为：

//theme-确定当前主题的名称。
//toggleTheme -可以切换当前主题的function。

2. 注册主题

//打开 App.js 并粘贴下面的代码

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { AppNavigator } from './navigation.component';
import { ThemeContext } from './theme-context'; //导入ThemeContext

export default () => {

  //创建{ theme, toggleTheme }，此对象成为了主题context，使用useState函数创建一个应用程序状态，以保存当前主题的名称
  const [theme, setTheme] = React.useState('light');

  //切换当前主题function
  const toggleTheme = () => {
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(nextTheme);
  };

  return (
    <>
      <IconRegistry icons={EvaIconsPack}/>
      <ThemeContext.Provider value={{ theme, toggleTheme }}>
        <ApplicationProvider {...eva} theme={eva[theme]}>
          <AppNavigator/>
        </ApplicationProvider>
      </ThemeContext.Provider>
    </>
  );
};

3. 用法

//在 home.component.js 中通过按下按钮进行修改以切换主题

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Layout } from '@ui-kitten/components';
import { ThemeContext } from './theme-context';

export const HomeScreen = ({ navigation }) => {

  const themeContext = React.useContext(ThemeContext);

  const navigateDetails = () => {
    navigation.navigate('Details');
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button style={{ marginVertical: 4 }} onPress={navigateDetails}>OPEN DETAILS</Button>
        <Button style={{ marginVertical: 4 }} onPress={themeContext.toggleTheme}>TOGGLE THEME</Button>
      </Layout>
    </SafeAreaView>
  );
};

五、注意事项

导入 import 组件一定要用{组件名}包裹住，否则将不能正确解析。