许 志强

许 志强

1662033960

React Native Zephyr 的初學者指南 | 用於 React Native 的 Tailwind CSS

在本教程中,您將了解什麼是 React Native Zephyr,如何使用 React Native Zephyr,如何使用 React Native Zephyr 中的樣式方法等等

React Native Zephyr是一個受 Tailwind CSS 啟發的樣式庫,旨在提高您的開發速度並更快地發布 React Native 應用程序。

使用純 CSS 構建複雜的 Web 應用程序可能是一項艱鉅的挑戰。因此,開發人員傾向於使用 Bootstrap 和 Tailwind CSS 等流行的樣式庫來縮短開發週期。

與 Web 上的樣式類似,使用 React Native 中的內置樣式功能可能是一個緩慢而費力的過程。有類似 Bootstrap 和 Tailwind CSS 的解決方案可用於 React Native,其中一種解決方案是 React Native Zephyr。React Native Zephyr 是一個受 Tailwind CSS 啟發的樣式庫,旨在提高您的開發速度並更快地發布 React Native 應用程序。

它還為 React Native 帶來了 Tailwind CSS 體驗。如果您熟悉 Tailwind CSS,您可以輕鬆選擇 Zephyr,因為兩者之間有相似之處。本文將向您介紹 React Native Zephyr 的主要功能。

  • 什麼是 React Native Zephyr?
  • 如何使用 React Native Zephyr
  • 如何在 React Native Zephyr 中使用樣式方法
  • React Native Zephyr 中的默認主題
  • 擴展和覆蓋 React Native Zephyr 中的默認主題

什麼是 React Native Zephyr?

React Native Zephyr 是一個受 Tailwind CSS 啟發的 React Native 樣式庫。它在 React Native 的上下文中實現了 Tailwind CSS 的一些核心思想,沒有任何原生依賴。

儘管在撰寫本文時仍處於積極開發階段,但以下是 React Native Zephyr 的一些關鍵特性。

  • 它提供了一套方便的開箱即用的內置樣式實用程序
  • 它帶有可擴展的默認主題
  • 它支持開箱即用的暗模式

上述特性使 React Native Zephyr 成為其他庫中內置樣式功能的更好替代品。上面的功能絕不是詳盡的,我建議查看官方文檔以了解更多 React Native Zephyr 的內置功能。

React Native 具有與 Web 不直接兼容的樣式功能。因此,將您的以 Web 為中心的樣式解決方案(如 Bootstrap 和 Tailwind CSS)直接轉移到 React Native 可能很困難。但是,由於兩個庫之間的相似性,您的一些 Tailwind CSS 技能集可以轉移到 React Native Zephyr。

如果你有一個現有的 React Native 項目,你可以像這樣從 npm 包註冊表安裝 React Native Zephyr:

# Using npm
npm i react-native-zephyr

# Using yarn
yarn add react-native-zephyr

# Using pnpm
pnpm add react-native-zephyr

如何使用 React Native Zephyr

React Native Zephyr 在後台使用StyleProvider組件來管理應用程序的配色方案等。要開始使用react-native-zephyr,請導入StyleProvider組件並將您的應用程序包裝在其中。

import { StyleProvider } from "react-native-zephyr";
export const App = () => (
  <StyleProvider>
    { /* The rest of your app goes here */}
  </StyleProvider>
);

React Native Zephyr 導出了createStyleBuilder用於生成核心樣式實用程序的功能。調用createStyleBuilder將返回stylesuseStylesmakeStyledComponent實用程序函數。這些樣式實用程序函數提供了 React Native Zephyr 的不同樣式方法。

為了便於維護,React Native Zephyr 建議創建一個專用的實用程序文件來管理您的樣式實用程序。下面的代碼顯示了 React Native Zephyr 的基本樣式實用程序文件。

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

createStyleBuilder函數還接受一個可選參數,儘管我們在上面的示例中沒有傳遞它,您可以使用它來覆蓋或擴展默認主題。如果您createStyleBuilder像我們所做的那樣不帶參數調用,React Native Zephyr 將使用默認主題。我們將在接下來的部分中學習覆蓋和擴展默認主題。

您可以將此實用程序文件中的所需內容導出到應用程序的其他組件。如上例所示,核心樣式實用程序是stylesandmakeStyledComponent函數和useStyles鉤子。

如何在 React Native Zephyr 中使用樣式方法

如上一節所述,React Native Zephyr 建議創建一個專用的styles.js實用程序文件來管理其實用程序功能。調用該createStyleBuilder函數返回stylesandmakeStyledComponent函數和useStyles鉤子。您可以將這些實用程序函數從styles.js文件中導出到應用程序中需要它們的組件中。

import { createStyleBuilder } from "react-native-zephyr";
export const { styles, useStyles, makeStyledComponent } = createStyleBuilder();

styles函數接受一個 React Native Zephyr 類名數組並返回一個 React Native 樣式對象。您作為參數傳遞的類名來自您的主題和處理程序。您可以styles像這樣使用該功能:

export default function App() {
  return (
    <View style={styles("flex:1", "bg:black")} >
      <Text style={styles("color:white", "text:5xl")}>
        Hello World
      </Text>
    </View>
  );
}

請注意,該styles功能沒有對暗模式的開箱即用支持。因此,它只適合一次性的樣式。

您還可以使用makeStyledComponentReact Native Zephyr 中的包裝器進行樣式設置。顧名思義,makeStyledComponent是一個用於製作樣式化組件的實用函數。實用程序函數將makeStyledComponent組件作為參數,並向組件添加classdarkClass道具。它返回包裝的組件,您可以將樣式類傳遞給該組件。

如上所述,最好在styles.js文件中創建樣式組件並像這樣導出它們:

export const StyledText = makeStyledComponent(Text);
export const StyledView = makeStyledComponent(View);

useStyles鉤子內部使用該方法styles。與該styles方法不同,該useStyles鉤子支持暗模式。與任何其他 React 鉤子一樣,您只能將useStyles鉤子與功能組件和另一個鉤子一起使用——它返回一個樣式對象,您可以將其傳遞給 React Native 元素。

下面的代碼演示瞭如何使用useStyles鉤子。

export default function App() {
  const wrapperStyles = useStyles({
    classes: ["flex:1", "bg:black"],
  });
  const textStyles = useStyles({
    classes: ["color:white", "text:5xl"],
  });
  return (
    <View style={wrapperStyles}>
      <Text style={textStyles}>Hello World</Text>
      <StatusBar style="auto" />
    </View>
  );
}

React Native Zephyr 中的默認主題

React Native Zephyr 有一個默認主題,無需配置即可使用——我們從一開始就一直在使用它。默認主題從 Tailwind CSS 中的默認主題中汲取靈感;如果默認主題不符合您的需要,您也可以擴展它。

默認主題帶有幾個樣式約束;React Native Zephyr 使用它來生成樣式類。

當您將pl:56樣式應用於以下示例中的元素時,React Native Zephyr 將添加224px. 在pl:56樣式類中,plpaddingLeft屬性,56是默認主題間距約束,其大小是224pxReact Native Zephyr 將樣式轉換為 React Native 樣式對象時的大小。該文檔包含默認主題約束及其相應比例的完整列表。

<StyledText classes={["pl:56"]}>Hello World</StyledText>

React Native Zephyr 使用spacing約束來生成邊距、填充和大小調整樣式類。默認主題包括其他幾個約束,如opacitiesletterSpacing約束。

擴展和覆蓋 React Native Zephyr 中的默認主題

儘管它帶有默認主題,但 React Native Zephyr 允許您擴展和覆蓋它。前幾節中介紹的createStyleBuilder函數將可選對像作為參數。該對象具有overrideThemeextendTheme屬性,分別用於覆蓋和擴展默認主題。這兩個屬性的值可以是對像或函數。

如果您將overrideTheme屬性的值設置為如下示例所示的對象,React Native Zephyr 將覆蓋默認主題中的顏色。顏色darklightbrandColorPalette將覆蓋下面示例中的默認顏色。

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
 overrideTheme: {
  colors: {
    dark: "#737373",
    light: "#e5e5e5",
    brandColorPalette: "#a1323e",
  }
 }
});

您可以將overrideTheme屬性的值設置為返回主題約束對象的函數,如下面的代碼所示。當您將屬性的值設置為函數時,您將可以訪問基本字體大小overrideTheme

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 18,
  overrideTheme: ({ baseFontSize }) => {
    return {
      colors: {
        dark: "#737373",
        light: "#e5e5e5",
        brandColorPalette: "#a1323e",
      },
      spacing: {
        enormous: baseFontSize * 100,
      },
    };
  },
});

在上面的示例中,React Native Zephyr 將使用您在自定義主題中提供的顏色和間距覆蓋默認主題中的顏色和間距。

你可以extendTheme類似地使用。與overrideTheme屬性不同的是,extendTheme屬性擴展了默認主題而不是覆蓋它。

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  extendTheme: {
    colors: {
      brandColorPalette: "#a1323e",
    },
  },
});

如果要訪問基本字體大小,還可以將extendTheme屬性的值設置為返回對象的函數,如下所示:

export const { makeStyledComponent, styles, useStyles } = createStyleBuilder({
  baseFontSize: 12,
  extendTheme: ({ baseFontSize }) => {
    return {
      spacing: {
        enormous: baseFontSize * 100,
      },
      colors: {
        brandColorPalette: "#a1323e",
      },
    };
  },
});

結論

Bootstrap 和 Tailwind CSS 等樣式解決方案很受歡迎,因為它們提高了開發速度。React Native Zephyr 正在嘗試將 Tailwind CSS 體驗帶入 React Native,如果您已經熟悉 Tailwind CSS,那麼很容易上手。

React Native Zephyr 配備了一個默認主題,提供了一組豐富的值來讓你失望。如果默認主題不能滿足您的需求,您可以按照文章中的說明擴展或覆蓋它。雖然在寫這篇文章的時候還很年輕,但還是值得探索一下 React Native Zephyr 看看它是否適合你——希望你會發現它對你的項目有用。

React Native Zephyr 有幾個特性我們沒有在本文中介紹。請查看官方文檔以了解更多功能。在下面的評論部分讓我知道您的想法。

文章原文來源https://blog.logrocket.com

#reactnative #tailwindcss 

What is GEEK

Buddha Community

React Native Zephyr 的初學者指南 | 用於 React Native 的 Tailwind CSS
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms?

React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. Hire Dedicated React Native Developer from top React Native development company, HourlyDeveloper.io to design a spectacular React Native application for your business.

Consult with experts:- https://bit.ly/2A8L4vz

#hire dedicated react native developer #react native development company #react native development services #react native development #react native developer #react native

Hire Dedicated React Native Developers - WebClues Infotech

Being one of the emerging frameworks for app development the need to develop react native apps has increased over the years.

Looking for a react native developer?

Worry not! WebClues infotech offers services to Hire React Native Developers for your app development needs. We at WebClues Infotech offer a wide range of Web & Mobile App Development services based o your business or Startup requirement for Android and iOS apps.

WebClues Infotech also has a flexible method of cost calculation for hiring react native developers such as Hourly, Weekly, or Project Basis.

Want to get your app idea into reality with a react native framework?

Get in touch with us.

Hire React Native Developer Now: https://www.webcluesinfotech.com/hire-react-native-app-developer/

For inquiry: https://www.webcluesinfotech.com/contact-us/

Email: sales@webcluesinfotech.com

#hire react native developers #hire dedicated react native developers #hire react native developer #hiring a react native developer #hire freelance react native developers #hire react native developers in 1 hour

Factors affecting the cost of hiring a React Native developer in USA - TopDevelopers.co

Want to develop app using React Native? Here are the tips that will help to reduce the cost of react native app development for you.
Cost is a major factor in helping entrepreneurs take decisions about investing in developing an app and the decision to hire react native app developers in USA can prove to be fruitful in the long run. Using react native for app development ensures a wide range of benefits to your business. Understanding your business and working on the aspects to strengthen business processes through a cost-efficient mobile app will be the key to success.

#best react native development companies from the us #top react native app development companies in usa #cost of hiring a react native developer in usa #top-notch react native developer in usa #best react native developers usa #react native

How much does it cost to develop a React Native mobile app?

React Native allows developers to develop mobile apps that have compatibility with Android, iOS & other operating systems. Due to the features like Native-like functionality and single code reusability and the access of various frameworks in the market, React Native has excelled as the most suitable framework for cross-platform mobile app development.

Why Do Businesses Prefer React Native App Development?

React Native is integrated with JS library that works as the fundamental for developing the app UI. Most businesses choose for developing React Native apps just due to their cross-platform & open-source features. A few further reasons why entrepreneurs & developers choose React Native app development include:

• Lowered Expedition Time

• Simple UI

• Cross-Platform and Code Sharing

• Lesser Workforce and Resources

• Community Assistance

• In-Built Elements and Reusable Codes

• Hot Reload

• JavaScript as Programming Language

• Easy to Execute Updates

Factors That Decide Cost of React Native App Development

If you are an entrepreneur or start-up and looking for cost-effective app development, React Native is one of the ideal options available out there.

• App’s UI/UX Design

• User Authorization

• App Complexity and Functionality

• App Development Team

• App Maintenance

• App Add-ons

• App Distribution

• Location of Development Company

• App Category

React Native cost depends widely on the complexity of a project or the app requirements. The price may also vary based on business requirements. React Native app development per hour can cost from $20 and $30 per hour in India. It can vary as per different locations.

Is React Native a good choice for mobile apps development?

Yes, React Native is the best choice for mobile app development as React apps are faster to develop and it offers better quality than hybrid apps. Additionally, React Native is a mature cross-platform framework.

Best React Native App Development Agency

AppClues Infotech is a leading React Native App Development Company in USA that build robust & innovative mobile app as per your specific business needs. They have a dedicated team of designers and programmers help to make a perfect mobile app.

If you have any mobile app development project in mind get in touch with AppClues Infotech and get the best solution for your business.

#react native app development cost #react native development company #best react native development company in usa #hire react native developers #hire dedicated react native developers & programmers #hire a react native development company