react native 樣式初學 (一)

2021-07-10 07:45:08 字數 1223 閱讀 4719

最近看到了乙個新技術~~react native~~

貌似國內還很少~~於是我就也來學學~~

這篇一類文章記錄我學習react native的過程

react native的第乙個hello world**很簡單~~

貼出如下

/**

* */'use strict';

import react, from 'react-native';

class

hellodk

extends

component

}// 建立乙個樣式表

const styles = stylesheet.create(,

titlem: ,

instructions: ,

});

如上**中包含了兩個元件乙個是view,乙個是text

首先是view的樣式

在這個**裡react native

簡單說一下 view可以用裡面的那些樣式來控制~

text的樣式如下~~也是可以用view的一些樣式~~寫控制項的時候可以翻看一下

//text的樣式如下

color string

fontfamily string

fontsize number

fontstyle enum('normal', 'italic')

fontweight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

letterspacing number

lineheight number

textalign enum("auto", 'left', 'right', 'center', 'justify')

textdecorationline enum("none", 'underline', 'line-through', 'underline line-through')

textdecorationstyle enum("solid", 'double', 'dotted', 'dashed')

textdecorationcolor string

writingdirection enum("auto", 'ltr', 'rtl')

如上樣式可以配置到樣式表中~~

react native初學跳坑

react native 環境配置 詳見react native官網 執行react native專案問題總結 1 執行成功後出現 原因 是因為assets目錄下面沒有找到相應的scripts檔案 2 在虛擬機器上面執行專案出現could not connect development server...

ReactNative布局樣式總結

flexnumber 用於設定或檢索彈性盒模型物件的子元素如何分配空間 flexdirectionenum row row reverse column column reverse flexdirection屬性決定主軸的方向,預設是 column flexwrapenum wrap nowrap...

react native專案之樣式總結

react native 以下簡稱rn 裡面涉及到的樣式規則都是在js檔案中寫的,一改pc端的在樣式檔案中定義規則,所以pc端開發習慣的童鞋轉向開發rn專案時,可能會對樣式感到有些奇怪 其實react在地面實現時會轉化對應的樣式。rn中的css樣式是css中的乙個子集,對css的一些規程進行了閹割,...