1. View: UI構(gòu)建的基石昏兆，一切頁面的起點(diǎn)
flexDirection：橫向縱向布局
flexGrow和flex的比較
尺寸屬性傳數(shù)值和百分比
position: absolute絕對(duì)定位下仍然受父級(jí)屬性影響
import { StyleSheet, View } from "react-native"
export default () => {
return (
<View style={styles.root}>
<View style={styles.subView1}></View>
{/* <View style={styles.subView2}></View>
<View style={styles.subView3}></View> */}
</View>
)
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#c0c0c0',
flexDirection: 'row',
justifyContent: 'center'
},
subView1: {
width: 100,
height: 100,
backgroundColor: 'red',
position: 'absolute',
},
subView2: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
subView3: {
width: 100,
height: 100,
backgroundColor: 'yellow'
},
});
由于subView1在主軸上是居中的醋旦，即使被position: 'absolute'修飾，但是由于沒有主軸方向上的位置椎组，即這里的left和right，所以subview1這里還是居中的，如果想要其距離左邊20店枣，在 justifyContent: 'center'不動(dòng)的情況下，只需要subView1加入left: 20即可叹誉，即
subView1: {
width: 100,
height: 100,
backgroundColor: 'red',
position: 'absolute',
left: 20
},
onLayout布局信息的回調(diào)
import { useEffect, useState } from "react"
import { StyleSheet, View } from "react-native"
export default () => {
const [height, setHeight] = useState(100);
useEffect(() => {
setTimeout(() => {
setHeight(200);
}, 2000);
})
return (
<View style={styles.root}>
<View
style={[styles.subView1, {height}]}
onLayout={event => {
console.log(event.nativeEvent)
}}>
</View>
{/* <View style={styles.subView2}></View>
<View style={styles.subView3}></View> */}
</View>
)
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#c0c0c0',
flexDirection: 'row',
justifyContent: 'center'
},
subView1: {
width: 100,
backgroundColor: 'red',
position: 'absolute',
left: 20
},
subView2: {
width: 100,
height: 100,
backgroundColor: 'blue'
},
subView3: {
width: 100,
height: 100,
backgroundColor: 'yellow'
},
});
setNativeProps：性能瓶頸下的選擇余地
useEffect(() => {
setTimeout(() => {
setHeight(200);
viewRef.current.setNativeProps({
style: {
backgroundColor: 'yellow'
}
})
}, 2000);
})
return (
<View style={styles.root}>
<View
ref={viewRef}
style={[styles.subView1, {height}]}
onLayout={event => {
console.log(event.nativeEvent)
}}>
</View>
{/* <View style={styles.subView2}></View>
<View style={styles.subView3}></View> */}
</View>
)
2. Text：使用占比最高的組件鸯两，使用簡單，深入復(fù)雜
字體屬性：fontSize长豁、fontFamily钧唐、fontWeight
行數(shù)以及修改模式：numberOfLines、ellipsizeMode
是否可選中以及選中色號(hào)：selectable匠襟、selectionColor
點(diǎn)擊和長按：onPress钝侠、onLongPress
跟隨系統(tǒng)字號(hào)：allowFontScaling
文字嵌套及注意事項(xiàng)
文本對(duì)齊：textAlign、textAlignVertical
文本裝飾：textDecorationStyle宅此、textDecorationLine
文字陰影：textShadowColor机错、textShadowOffset、textShadowRadius一起使用
TextDemo.js
import { StyleSheet, Text, View } from "react-native"
export default () => {
return <View style={styles.root}>
<Text
style={styles.txt}
numberOfLines={1}
ellipsizeMode="tail"
selectable={true}
selectionColor='#1876FF'
onPress={(event) => {
console.log(event.nativeEvent);
}}
onLongPress={(event) => {
console.log(event.nativeEvent);
}}
allowFontScaling={false}
>
我是一個(gè)文本
</Text>
</View>
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#c0c0c0'
},
txt: {
width: 300,
height: 50,
fontSize: 20,
fontWeight: 'bold',
backgroundColor: 'yellow',
textAlign: 'center',
textAlignVertical: 'center',
// textDecorationStyle: 'solid',
// textDecorationLine: 'underline',
textShadowColor: '#A0A0A0',
textShadowOffset: {width: 2, height: 4},
textShadowRadius: 8
}
})
3. Image：精美的UI從使用圖片開始
圖片源的兩種類型：source
縮放模式：resizeMode
blurRadius：曾經(jīng)的難題現(xiàn)在如此簡單
占位圖片：defaultSource
漸入動(dòng)畫時(shí)間：fadeDuration
加載成功和加載失敻竿蟆：onLoad弱匪、onError
加載開始和加載結(jié)束：onLoadStart、onLoadEnd
著色：tintColor
ImageDemo.js
import { View, Image, StyleSheet } from "react-native"
import { imageUri } from '../constants/Uri.js'
import avator from '../assets/images/avatar.png'
import setting from '../assets/images/icon_setting.png'
import { useEffect } from "react"
export default () => {
return <View style={styles.root}>
<Image
style={styles.img}
source={setting}
// source={{ uri: 'xxxx' }}
// source={avator}
// fadeDuration={3000}
// blurRadius={3}
onLoad={(event) => {
console.log(event.nativeEvent);
}}
onError={(event) => {
console.log(event.nativeEvent);
}}
onLoadStart={(event) => {
}}
onLoadEnd={(event) => {
}}
/>
</View>
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#c0c0c0'
},
img: {
width: 200,
height: 200,
resizeMode: 'contain',
tintColor: 'white'
}
})
api: Image.getSize()、Image.prefetch()
useEffect(() => {
Image.getSize(imageUri, (width, height) => {
console.log(`width: ${width}, height: ${height}`)
}, (error) => {
console.log(error);
})
Image.prefetch(imageUri).then((result) => {
console.log(result);
}).catch(e => {
console.log(e);
})
}, [])
4. ImageBackground：View和Image的合體
style和imageStyle
ref和imageRef
ImageBackgroundDemo.js
import { ImageBackground, StyleSheet, View, Image, Text } from "react-native"
import bg_card from '../assets/images/bg_card.png'
import icon_bank from '../assets/images/icon_bank.png'
export default () => {
return <View style={styles.root}>
<ImageBackground
style={styles.imageBackgroundStyle}
imageStyle={styles.imageStyle}
source={bg_card}
>
<Image
style={styles.imgStyle}
source={icon_bank}
/>
<View style={styles.txtContainer}>
<Text style={styles.topDesc}>
招商銀行
</Text>
<Text style={styles.middleDesc}>
儲(chǔ)蓄卡
</Text>
<Text style={styles.lastDesc}>
●●●● ●●●● ●●●● 3068
</Text>
</View>
</ImageBackground>
</View>
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
flexDirection: 'column',
padding: 10
},
imageBackgroundStyle: {
width: '100%',
height: 150,
flexDirection: 'row',
},
imageStyle: {
borderRadius: 12,
resizeMode: 'cover'
},
imgStyle: {
width: 48,
height: 48,
marginTop: 20,
marginLeft: 20,
},
txtContainer: {
width: '100%',
height: '100%',
flexDirection: 'column',
marginTop: 20,
marginLeft: 20,
},
topDesc: {
fontSize: 18,
fontWeight: 'bold',
color: 'white'
},
middleDesc: {
fontSize: 16,
color: 'A0A0A0',
marginTop: 5
},
lastDesc: {
color: 'white',
marginTop: 30
},
});
5. TextInput：唯一且強(qiáng)大的輸入組件
字體樣式：和Text一致
自動(dòng)聚焦：autoFocus和focus
自動(dòng)失焦：blurOnSubmit和blur()
隱藏光標(biāo)：caretHidden
默認(rèn)輸入：defaultValue
可編輯性：editable
鍵盤類型：keyboardType
1) default
2) number-pad
3) decimal-pad
4) numeric
5) email-address
6) phone-pad
確定鍵配置：returnKeyType
1) done
2) go
3) next
4) search
5) send
最大長度：maxLength
多行輸入：multiline和numberOfLines
焦點(diǎn)回調(diào)：onBlur和onFocus
內(nèi)容回調(diào)：onChange和onChangeText
選中相關(guān)：selection萧诫、selectionColor斥难、selectTextOnFocus
對(duì)齊方式：textAlign和textAlignVertical
安全模式：secureTextEntry
textInputDemo.js
import React, { useRef, useEffect } from 'react';
import {
SafeAreaView,
StyleSheet,
View,
TextInput
} from 'react-native';
export default () => {
const inputRef = useRef(null);
useEffect(() => {
setTimeout(() => {
// inputRef.current.blur();
}, 2000);
}, []);
return (
<View style={styles.root}>
<TextInput
ref={inputRef}
style={styles.input}
// autoFocus={true}
blurOnSubmit={true}
caretHidden={false}
// defaultValue="默認(rèn)內(nèi)容"
editable={true}
keyboardType='number-pad'
returnKeyType='search'
// maxLength={11}
// multiline={true}
// numberOfLines={2}
onFocus={() => {
}}
onBlur={() => {
}}
onChange={(event) => {
console.log(event.nativeEvent);
}}
onChangeText={(text) => {
console.log(text);
}}
// selection={{start: 0, end: 3}}
selectionColor='red'
selectTextOnFocus={true}
secureTextEntry={true}
/>
</View>
);
}
const styles = StyleSheet.create({
root: {
width: '100%',
height: '100%',
backgroundColor: '#F0F0F0',
},
input: {
width: '100%',
height: 56,
backgroundColor: '#D0D0D0',
fontSize: 24,
color: '#333333',
fontWeight: 'bold',
},
});
