React Native Magnus UI 使用教程

React Native Magnus UI 使用教程

react-native-magnusA Utility-First React Native UI Framework 🚀🧩项目地址:https://gitcode.com/gh_mirrors/re/react-native-magnus

项目介绍

React Native Magnus UI 是一个为 React Native 和 Web 设计的 UI 组件库。它提供了超过 25 个精心设计的组件，旨在简化移动和 Web 应用的开发过程。Magnus UI 采用实用优先的设计理念，类似于 TailwindCSS，使得样式可以直接作为组件的属性进行设置。

项目快速启动

安装

首先，确保你已经安装了 React Native 环境。然后，通过 npm 或 yarn 安装 Magnus UI：

npm install react-native-magnus

或者

yarn add react-native-magnus

初始化

在你的应用入口文件（例如 App.js）中，导入并初始化 Magnus UI：

import { ThemeProvider } from 'react-native-magnus';
import App from './src/App';

const theme = {
  // 你可以在这里自定义主题
};

export default function Main() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

使用组件

在你的组件中使用 Magnus UI 提供的组件，例如：

import React from 'react';
import { Div, Text, Button } from 'react-native-magnus';

const MyComponent = () => {
  return (
    <Div p="lg" bg="white">
      <Text fontSize="xl" color="black">Hello, Magnus UI!</Text>
      <Button mt="md" bg="blue500">Click Me</Button>
    </Div>
  );
};

export default MyComponent;

应用案例和最佳实践

响应式设计

Magnus UI 支持响应式设计，可以通过媒体查询来调整组件的样式。例如：

import { useWindowDimensions } from 'react-native';

const MyResponsiveComponent = () => {
  const { width } = useWindowDimensions();

  return (
    <Div p="lg" bg="white">
      <Text fontSize={width > 600 ? '2xl' : 'xl'} color="black">Responsive Text</Text>
    </Div>
  );
};

主题定制

Magnus UI 允许你自定义主题，以满足特定的设计需求。例如：

const theme = {
  colors: {
    primary: 'blue500',
    secondary: 'gray300',
  },
  fontSizes: {
    body: 16,
    heading: 24,
  },
};

典型生态项目

结合 Next.js

Magnus UI 可以与 Next.js 结合使用，实现服务器端渲染（SSR）。首先，安装 Next.js：

npx create-next-app my-app
cd my-app
npm install react-native-magnus

然后在 _app.js 中初始化 Magnus UI：

import { ThemeProvider } from 'react-native-magnus';
import '../styles/globals.css';

const theme = {
  // 自定义主题
};

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

结合 Expo

Magnus UI 也可以与 Expo 结合使用，快速开发跨平台的应用。首先，安装 Expo：

npm install -g expo-cli
expo init my-project
cd my-project
npm install react-native-magnus

然后在 App.js 中初始化 Magnus UI：

import { ThemeProvider } from 'react-native-magnus';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

const theme = {
  // 自定义主题
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />

react-native-magnusA Utility-First React Native UI Framework 🚀🧩项目地址:https://gitcode.com/gh_mirrors/re/react-native-magnus