View, Image, TextInput 元件介紹
常用View.layout 屬性
marginHorizontal
marginHorizontal
padding
backgroundColor
opacity
....
可參考:https://facebook.github.io/react-native/docs/layout-props.html
https://facebook.github.io/react-native/docs/view-style-props.html
StyleSheet
import { StyleSheet } from 'react-native'
const styles = StylesSheet.create({
container: {
flex: 1
}
})
使用目的:因為使用ID參照,所以可以降低每次產生相同 style object 的 overhead
使用
flatten
還原原本的style object
const styles = StyleSheet.create({
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
...
render() {
const yourWindow = Dimensions.get('window');
const instructionStyle = StyleSheet.flatten(styles.instructions);
instructionStyle.color = '#ddd';
return (
<View style={styles.container}>
...
<Text style={instructionStyle}>Test your Camera</Text>
</View>
);
}
View 元件
預設本身無任何畫面與佔用任何空間(除非明確指定寬高或設定
{flex: 1}
),作為其餘畫面元件的容器,效果如同web 上的<div>
在畫面佔用空間的大小與容器中的佔用空間有關
<View>
<Text style={ { width: 20, height: 20 } }></Text>
</View>
可以使用
{flex: 1}
將其撐得與parent 同高與同寬,下面例子裡面的view 的 高為100 但寬還是 0 (沒指定預設flexDirection: 'column'
)
<View style={ {width: 100, height: 100} }>
<View style={ { flex: 1 } } />
</View>
常見技巧:
Button 置底
<View style={ { flex: 1 } }> <View style={ { flex: 1 } }> <Text>{'中間版面'}</Text> </View> <Button title='Test' onPress={()=>()} /> </View>
Image 元件
tintColor
將圖片中非透明元素設定為指定顏色,常用於Icon 換色
resizeMode
stretch | cover | contain
後兩者在不改變圖片本身比例的情況下,對圖片跟他的設定的大小
width
,height
做適當的處理cover :無論圖片大小,讓圖片撐滿所設定的寬高,並且保留比例(所以圖片比例跟設定的寬高比例不同會被裁切)
contain: 無論圖片大小,讓圖片置於所設定的寬高中,並且保留比例(所以圖片若比例不同不會被裁切)
source
網路資源使用uri 對
<Image source={ { uri: http://|file:// } } />
靜態資源直接使用source ,
<Image source={require('./test.png)} />
style
設定圖片本身的寬高 與 其他 Layout Props
blurRadius
設定模糊程度
數字越大越模糊
[blurRadius] (https://facebook.github.io/react-native/docs/image.html#blurradius\
<Image style={styles.cover} blurRadius={5} resizeMode="cover" source={cover} />

常見技巧
Avatar (Rounded Image)
const styles = StyleSheet.create({
image: {
borderRadius: 20,
width: 40,
height: 40
}
})
...
<Image style={styles.image} source={require('./some-image.png')} resizeMode='cover' />
全螢幕背景
const styles = StyleSheet.create({
image: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
},
container: {
flex: 1
}
})
...
<View style={styles.container}>
<Image style={styles.image} resizeMode='cover' source={require('./some-image.png')} />
</View>
TextInput 元件
onChangeText
接收使用者每次輸入的字元onSubmitEditing
當virtual keyboard 的 returnKey 觸發時returnKeyType
設定returnKey 在virtual keyboard 上的長相value
TextInput 當前再輸入框顯示的字串blurOnSubmit
是否要讓元件在submit 後失去焦點placeholder
placeholderTextColor
其他
TextInput focus -> virtual Keyboard Up
TextInput blur -> virtual keyboard down
Last updated
Was this helpful?