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', }, });
