我有这个代码
<View style={{flex: 1}}>
<ScrollView contentContainerStyle={{height: 2000}}>
<Text style={{flex: .5, backgroundColor: 'orange'}}>box1</Text>
<Text style={{flex: .5, backgroundColor: 'orange'}}>box2</Text>
<Text style={{flex: .5, backgroundColor: 'orange'}}>box3</Text>
</ScrollView>
</View>
有了这个,我希望每个<Text />
都占据屏幕的一半(因此,所有子项的组合等于屏幕高度的1.5)。相反,每个框都占据了2000像素高度的三分之一。无论如何,有没有使用flex获得我想要的结果?还是我必须计算屏幕的高度,然后为每个<Text />
获得所需的百分比?
答案 0 :(得分:0)
您应该使用百分比而不是flex
答案 1 :(得分:0)
您可以在scrollView内创建另一个视图,并将其高度固定为屏幕高度的1.5倍,然后使文本具有相等的弹性。
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
TouchableOpacity,
Dimensions,
} from 'react-native';
const App = (props) => {
let screenHeight = Dimensions.get('window').height;
let bodyHeight = screenHeight*1.5;
return (
<ScrollView style={styles.body}>
<View style={[styles.innerBody, { height: bodyHeight }]}>
<Text style={{flex: .5, backgroundColor: 'orange'}}>box1</Text>
<Text style={{flex: .5, backgroundColor: 'blue'}}>box2</Text>
<Text style={{flex: .5, backgroundColor: 'purple'}}>box3</Text>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
body: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
},
innerBody: {
borderColor: 'red',
borderWidth: 5
}
});
export default App;
我已经创建了一个snack