React Native 之雷包學習記錄（持續新增）

工程師卡卡

·

Follow

Jun 24, 2021

--

Share

• margin：
  RN — 四個周圍數值不同，無法寫在一起。marginTop、marginLeft、marginBottom以及marginRight 須各自寫。
• lineHeight：
  RN — 效果不如預期，lineHeight is less than the fontSize ，目前版本並無修正。
  看到有外國人的解法是you’ll need to add top padding to the Text element, which you must then compensate for by shifting the element up (e.g. via top plus relative positioning, or a negative marginTop)
  也可以直接用要多寬來寫，直接寫25而不是寫1.5
• <span>：
  RN — 這種inline效果有兩個方法。
  1. 可使用<Text>標籤包<Text>，裡面的將會成為inline效果。
  2. 彈性盒子用flexDirection調整成row的屬性。

<Text style={styles.desc}>    <Text style={styles.heightLine}>抽獎、折抵、好康 </Text>享不完</Text>

• fontWeight/color/fontSize：
  一定要放在指定標籤上，無法放在container一起設定。
• window.innerWidth：使用Dimensions來看目前螢幕的寬高

import { Dimensions } from 'react-native';//计算屏幕的宽高
let {width, height} = Dimensions.get('window');

• <Button>標籤無法客製化，需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮。
• <Image>標籤一定要設定寬高，不能使用％
• <FlatList>不能在<ScrollView>裡，會出現警告訊息，VirtualizedList需要包在<SafeAreaView>