1. Style
The style of react native is similar to react
Style expression:
1. Inline: use js object to express css style in html, curly braces { } are objects
style={ {flex:1,justifyContent:"center"} }
(1) Note that the attribute is no longer - the connection is changed to a small camel name:
justify-contentchange ( justifyContent
2) Note that the attribute value is a string with quotation marks " "
2. Call a custom style sheet: {style class. attribute}
3. Coexistence of style sheet and inline style: {[ ]}
export default class App extends Component {
render() {
var name="jack"
return (
// 行内样式
<View style={
{
backgroundColor:"skyblue",flex:1,alignItems:"center",justifyContent:"center"} }>
{
/* 下面引用了自定义样式styles，多组样式对象时可写在数组里，数组中越靠后，优先级越高，如下面的字体会显示为红色 */}
<Text style={
[styles.font,{
color:"red"}] }>hello {
name}</Text>
</View>
);
}
}
// 自定义样式
const styles=StyleSheet.create({
font:{
fontSize:50,
color:'blue'
}
})
2. Layout
The default of react native is flex layout, so we don’t need to write display: flex,
but there is a certain difference between the flex layout in react native and the flex in css
1. flexDirection: determines the direction of the main axis: the default in CSS is row direction, here The default is column
2, no need to write diplay: flex
3, flex: 1 flex can only write one value
Three, picture Image
// Define and export custom components
// There are two commonly used ways to import image resources in RN:
// Local resource import: source={ require('1.png') }
// Network resource import: source={ {uri:'http://1.png'} }specify the size of the current image (if not, the side image will not be displayed)
// in Use ImageBackground to specify the size
<View>
{
/* 本地资源引入 */}
<Image source={
require('../images/de.jpg') }></Image>
{
/* 网络资源 */}
<Image
opacity={
0.2}
style={
{
width:200,height:200}}
source={
{
uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572251817&di=122528a67a3c249070a67faf691ecd40&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131220%2F20131220235848-670354324.jpg'} }></Image>
{
/*背景图片 */}
<ImageBackground
source={
require('../images/de.jpg') }
style={
{
width:'100%',height:1000}}
opacity={
0.5}
>
<Text style={
{
fontSize:50,color:'white'}}>刘德华</Text>
</ImageBackground>
</View>