Question

我有这个代码

<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 />获得所需的百分比？

Answer 1

您应该使用百分比而不是flex

Answer 2

您可以在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

在ScrollView中使用屏幕的弯曲

2 个答案: