app.js
文本水平居中了哈
控制文本的大小 字体颜色等 只有在文本元素上去控制哈
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App: () => React$Node = () => {
return (
<View style={styles.box}>
<Text style={styles.boxfont}>12好3</Text>
</View>
);
};
export default App;
const styles = StyleSheet.create({
box: {
width: 750,
height: 100,
lineHeight: 100,
backgroundColor: 'pink',
display: 'flex',
justifyContent: 'center',
},
// 控制文本的大小 字体颜色等 只有在文本元素上去控制哈
boxfont: {
color: 'blue',
fontSize: 20,
},
});
在app.js中写入一个组件哈
app.js如下
import React from 'react';
import ViewDemo from './ViewDemo1';
const App: () => React$Node = () => {
return <ViewDemo></ViewDemo>;
};
export default App;
组件ViewDemo1.js
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
export default class viewDemo1 extends Component {
render() {
return (
<View style={styles.box}>
<Text>左边</Text>
<Text>中间</Text>
<Text>右边</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
display: 'flex',
},
});
水平垂直居中
export default class demo2 extends Component {
render() {
return (
<View style={styles.box}>
<Text>左边</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
width: '100%', //撑满屏幕
height: 45, //高度不加引号 直接写数字
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'pink',
},
});
全屏 tu
全屏利用了
width: '100%', //撑满屏幕
height: '100%', //撑满屏幕
export default class demo2 extends Component {
render() {
return (
<View style={styles.box}>
<Text>左边</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
width: '100%', //撑满屏幕
height: '100%', //高度不加引号 直接写数字
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'pink',
},
});
const myDimensions = Dimensions.get('window');
可以计算满屏哈
动态计算
所以现在有两种方第一种是 100% 第二种是Dimensions 【dɪ ˈmɛn ʃən z]】
import React, {Component} from 'react';
import {View, Text, StyleSheet, Dimensions} from 'react-native'; //引入Dimensions
const myDimensions = Dimensions.get('window'); //
const mywd = myDimensions.width; //动态计算
const myht = myDimensions.height;
export default class demo2 extends Component {
render() {
return (
<View style={styles.box}>
<Text>左边</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
width: mywd, //直接使用变量
height: myht, //
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'pink',
},
});