React Native 雜貨（透明色、行間距、字體加粗等）

本文轉載自查看原文 2021-06-04 18:11 2564 alignItems/ numberOfLines/ borderRadius/ AppRegistry/ flexDirection/ TypeError/ lineHeight/ ImageBackground/ React Native/ Rect Native/ transparent

項目中我們會經常使用到一些屬性，下面簡記下自己使用的

1、透明色 transparent

2、View默認的色值就是transparent

3、字體加粗 fontWeight（一般會根據設計統一調整）

this.isAndroid()?'200':'bold';

4、圓角 borderRadius

5、子組件對齊 alignItems

6、文本設置一行 numberOfLines（默認是自動換行）

<Text style={style.item_tab} numberOfLines={1}>測試</Text>

7、行間距 lineHeight （字體加間距之和）

item_des: {
        fontSize: DeviceHelp.fontSize(14),
        color: '#666666',
        lineHeight: 22,
    },

8、布局方向 flexDirection，默認是column

9、背景圖片 ImageBackground

當背景隨內容高度變化時要設置minHeight，不然會按照真實尺寸走，

動態變化后圖片未失真

<ImageBackground source={require('../../../image/report_top_bg.png')} imageStyle={{ borderRadius: 8 }} style={style.item_bg} >
                    

 </ImageBackground>

item_image_bg: {

minHeight: 192,

width: DeviceHelp.getDeviceWidth(),

marginBottom: 10,

10、Text是可以嵌套的，協助我們實現簡單的富文本功能

<Text style={style.item_user_left}>我是前端<Text style={style.item_user_right}>我是中間</Text>我是后端</Text>

11、Image加載本地圖片和網絡圖片

// 本地
<Image style={style.item_left_img} source={require('../../../image/pack_back.png')} />

// 遠程

12、？屬性可能為空時要給默認值（subBpCount?: number）

13、React Native 如原生一樣，組件也是需要時才創建

14、React Native 跳轉不需要知道來源也可以

15、路徑大小寫出錯不飄紅注意看路徑

16、vscode 文件名字母大寫變小寫認為沒有變化提交不會被識別

17、FlateList

不存在復用功能（不像原生的UItableview），需要指定key ，key只是用來標記唯一性，並不是原生的重用標記，不然會報警告

18、AppRegistry

AppRegistry 是運行所有 React Native 應用程序的 JS 入口點。

應用程序根組件需要通過 AppRegistry.registerComponent 來注冊它們自身，然后本地系統就可以加載應用程序的包，

再然后當 AppRegistry.runApplication准備就緒后就可以真正的運行該應用程序了。

/**

* `AppRegistry` is the JS entry point to running all React Native apps. App

* root components should register themselves with

* `AppRegistry.registerComponent`, then the native system can load the bundle

* for the app and then actually run the app when it's ready by invoking

* `AppRegistry.runApplication`.

19、constructor

constructor( )——構造方法

這是ES6對類的默認方法，通過 new 命令生成對象實例時自動調用該方法。

並且，該方法是類中必須有的，如果沒有顯示定義，則會默認添加空的constructor( )方法。

20、super

super( ) ——繼承

在class方法中，繼承是使用 extends 關鍵字來實現的。

子類必須在 constructor( )調用 super( )方法，否則新建實例時會報錯。

報錯的原因是：子類是沒有自己的 this 對象的，它只能繼承自父類的 this 對象，然后對其進行加工，而super( )就是將父類中的this對象繼承給子類的。沒有 super，子類就得不到 this 對象。

21、優點

復用了 React 的思想，有利於前端開發者涉足移動端。React 是一套可以用簡潔的語法高效繪制 DOM 的框架

能夠利用 JavaScript 動態更新的特性，快速迭代。

相比於原生平台，開發速度更快，相比於 Hybrid 框架，性能更好。

22、display

是否展示（顯示隱藏），

該效果同安卓的隱藏效果，不展示的時候，隱藏的組件占有的位置也會清空，

iOS的隱藏效果是組件隱藏，但組件的位置依舊存在。

23、組件內實體屬性有時可以直接取，有時又不能直接取。

某些情況下組件內直接取實體屬性會報TypeError：undefined is not an object錯誤，

此時需要用三目?: (this.props.userBaseVo ? this.props.userBaseVo.userUrl : '' )容錯詳情： React Native TypeError：undefined is not an object

24、setState是異步操作，如果依賴state中數據結果，要確保數據賦值成功再使用。詳情： RN setState 采坑小記

25、設置有透明度的顏色使用HEXA(安卓原生使用AHEX,iOS原生使用HEXA)

26、集合和字符串都可以使用length判空

集合：abilitys

let abilitys = this.props.sysInfoVo ? this.props.sysInfoVo.abilitys : []
            if (abilitys && abilitys.length) {

字符串：orgPath

if (this.props.orgPath&&this.props.orgPath.length) {

27、FlatList一般用法

private showList() {
        let evaVoList = this.state.data ? this.state.data.evaVoList : []
        if (evaVoList && evaVoList.length) {
            const extraUniqueKey = () => Math.random().toString();
            const renderAssertItem = (render: ListRenderItemInfo<EvaVoList>) => {

                return (
                    <ComponentValueItemView
                        evaVoList={render.item}
                    />

                )
            }

            return (
                <FlatList style={style.list} showsVerticalScrollIndicator={false}

                    //數據綁定
                    data={evaVoList}
                    //列表顯示控件
                    renderItem={renderAssertItem}

                    keyExtractor={extraUniqueKey}
                />


            );

        }
    }