Overview What is NativeWind? Do you like using Tailwind CSS to style your apps? This helps you do that in React Native. NativeWind is not a component library, it's a styling library. If you're looking for component libraries that support NativeWind, see Component Libraries. NativeWind makes sure you're using the best styling engine for any given platform (e.g. CSS StyleSheet on web and StyleSheet
セットアップ yarn add react-dom react-native-web yarn add -D babel-plugin-react-native-web publicディレクトリを作り、中にファイルを追加 index.htmlを作る index.web.jsを作る webpack.config.jsを作る package.jsonにスクリプトを追加 "web": "webpack serve --mode=development --config ./public/webpack.config.js” public/webpack.config.jsのサンプル const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = r
As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the difference between all the different props. justify vs align, relative vs absolute, items vs content, It was all very confusing… 😟 So I prepared this visual guide with all of the important props, including some playgrounds where you can play around with them.
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout. Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with
React & React Native Components & Patternscopy-paste components & patterns crafted with Tailwind CSS (NativeWind) May 15, 2023The Power of Positive ThinkingDiscover how the power of positive thinking can transform your life, boost your confidence, and help you overcome challenges. Explore practical tips and techniques to cultivate a positive mindset for greater happiness and success.
この記事はReact Native 全部俺 Advent Calendar 2日目の記事です。 このアドベントカレンダーについて このアドベントカレンダーは @itome が全て書いています。 基本的にReact NativeおよびExpoの公式ドキュメントとソースコードを参照しながら書いていきます。誤植や編集依頼はXにお願いします。 Expoとは何か、どう使うべきか 今回はReact Nativeアプリを開発する際に避けては通れないExpoについて解説します。特に過去にReact Nativeを使っていた人はExpoについて「あくまでシンプルなアプリを作るときに使うものであって、複雑なケースには向かない」と思っている人も多いと思うので、Expoの現在の機能と立ち位置について詳しく説明したいと思います。 ExpoはReact Nativeとどう違うのか ExpoはReact Nativeの
Expoに関する詳しい内容は2日目の記事で紹介します。 仕組み React NativeはReactのコンポーネントをネイティブのプラットフォームコンポーネントにブリッジします。例えば以下のようなReactコードは import { View, Text } from 'react-native'; function MyComponent() { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { f
なんだか最近React Nativeに関する投稿が増えている気がしますね。 筆者も本投稿を準備していたところ、先に投稿が増えてきたので二番煎じ感が否めませんが、少し俯瞰的な整理としてご覧いただければと思います。 React Native界隈は近年盛り上がってきていて、特にExpo関連の進化を中心に、パフォーマンスも開発効率も大幅に改善されてきています🔥 具体的にどのように盛り上がっているのか、 React Conf 2024のKeynote(Day 2) がYoutubeで公開されており、非常に分かりやすくまとまっていました。 本記事はこの動画の流れに沿って、見どころをチャプターで切るように紹介しながら、関連情報やその後のアップデートの話もできればと思います。 ※React Conf 2024は5/15・16に開催されたものです 動画前半: React Nativeがいかに盛り上がってい
Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを?」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く