[react-native] 03 响应式布局

app.js 入口文件

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  
// import Index from './demo_StyleSheet/FlexDirection.js'  
import Index from './demo_dimension/index.js'  
  
export default class App extends Component{  
    render(){  
    return (  
        <Index />  
        )  
    }  
}

还是老样子的引入模版，对接好自己的路径

响应式布局的 导入

import {Text, View, ScrollView, StyleSheet, Dimensions} from 'react-native'

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, Dimensions} from 'react-native'  
  
export default class FlexDirection extends Component{  
render(){  
return (  
    <View style={[styles.container]}>  
    <View style={[styles.itemBase]}><Text> 扫一扫 </Text></View>  
    <View style={[styles.itemBase]}><Text> 付款码 </Text></View>  
    <View style={[styles.itemBase]}><Text> 卡包 </Text></View>  
    <View style={[styles.itemBase]}><Text> 出行 </Text></View>  
</View>  
)  
}  
}  
  
const styles = StyleSheet.create({  
container:{  
    flexDirection:'row'  
},  
itemBase:{  
    justifyContent:'center',  
    alignItems:'center',  
    backgroundColor:'#00b38a',  
    width: Dimensions.get('window').width/4  
}  
})

像这个图片里所展示的，我们的绿色背景，并没有完全覆盖屏幕，每一部手机的屏幕尺寸又不一样，我们不能把宽度写死，所以必须要用响应式布局。

所以这里我们需要加上这么一句话

import {Text, View, ScrollView, StyleSheet, Dimensions} from 'react-native'

width: Dimensions.get('window').width/4

这样，你就会看到满屏的渲染了

const styles = StyleSheet.create({  
container:{  
flexDirection:'row'  
},  
itemBase:{  
justifyContent:'center',  
alignItems:'center',  
backgroundColor:'#00b38a',  
width: Dimensions.get('window').width/4,  
height:90,  
borderWidth:1,  
borderColor:'yellow'  
}  
})