1. View: UI构建的基石，一切页面的起点
flexDirection：横向纵向布局
flexGrow和flex的比较
尺寸属性传数值和百分比
position: absolute绝对定位下仍然受父级属性影响
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'不动的情况下，只需要subView1加入left: 20即可，即
subView1: {
width: 100,
height: 100,
backgroundColor: 'red',
position: 'absolute',
left: 20
},
onLayout布局信息的回调
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：使用占比最高的组件，使用简单，深入复杂
字体属性：fontSize、fontFamily、fontWeight
行数以及修改模式：numberOfLines、ellipsizeMode
是否可选中以及选中色号：selectable、selectionColor
点击和长按：onPress、onLongPress
跟随系统字号：allowFontScaling
文字嵌套及注意事项
文本对齐：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}
>
我是一个文本
</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：曾经的难题现在如此简单
占位图片：defaultSource
渐入动画时间：fadeDuration
加载成功和加载失败：onLoad、onError
加载开始和加载结束：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}>
储蓄卡
</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：唯一且强大的输入组件
字体样式：和Text一致
自动聚焦：autoFocus和focus
自动失焦：blurOnSubmit和blur()
隐藏光标：caretHidden
默认输入：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
焦点回调：onBlur和onFocus
内容回调：onChange和onChangeText
选中相关：selection、selectionColor、selectTextOnFocus
对齐方式：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="默认内容"
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',
},
});
