Question

我尝试为视图设置minHeight（屏幕的一半高度），在此视图中，各项之间必须保持空格。

示例之间没有空格：

<ScrollView>
  <View style={{minHeight:height}>
      <View>
          <Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
          </Text>
      </View>
      <View style={{backgroundColor:'grey', height: 20}}/>
  </View>
</ScrollView>

当我尝试不使用空格时，视图的高度为半屏，但如果我在其中添加空格：

<ScrollView>
  <View style={{minHeight:height,justifyContent:'space-between'}}>
      <View>
          <Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
          </Text>
      </View>
      <View style={{backgroundColor:'grey', height: 20}}/>
  </View>
</ScrollView>

视图的高度在增加，我不知道为什么。如果视图可以包含项目，我希望高度等于一半的高度。而且，如果视图中的项目太大，则视图的高度将增加。

我该如何解决？

我已经以expo为例：

Example

尝试删除证明内容。您会明白我的意思。

编辑

这是我的错误代码：

 <View style={{flex:1}}>
       <View style={{minHeight:'50%', backgroundColor:'blank',justifyContent: 'space-between'}}> 
       <Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello </Text> 
       <View style={{backgroundColor:'grey', height: 20}}/>
       </View> 
        <Text>test</Text>
      </View>

结果：

灰色栏应位于屏幕中间

Answer 1

       <ScrollView>
  <View style={{minHeight:'50%', backgroundColor:'green'}}>
          <Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello
          </Text>

  </View>
   <View style={{minHeight:'50%', backgroundColor:'red'}}>
          <Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello1
          </Text>

  </View>
</ScrollView>

您可以设置 minHeight：'50％'，这将有助于将组件分成半屏。

您的解决方案：

      <View style={{ flex: 1 }}>
                <View style={{ minHeight: '50%', backgroundColor: 'green', justifyContent: 'space-between' }}>
                    <Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'red' }}>hello </Text>
                    <Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
                    <Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'yellow' }}>hello </Text>
                    <Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
                    <View style={{ justifyContent: 'flex-end', backgroundColor: 'grey', height: 20 }} />
                </View>
                <Text>test</Text>
      </View>

反应本机最低身高证明内容

1 个答案: