Reactnative React Native 中的视图与 Flex 不占用相同的高度空间

发布于08月02日

我试图用Flex获得两个浏览量达到equal space in height个，但似乎没有达到预期的效果.也许我做错了什么，或者误解了Flex的系统？

如下图所示，文本不会占据视图的整个高度，但仍会在文本下方留出空间.

如果我删除文本元素并设置静态宽度，它将按预期工作.

Edit1:将代码放在父ScrollView之外时，它会按预期工作.似乎是父ScrollView导致了fleGrow 1出现这种情况.

我创建了一个snack来重现这个问题.它works in web版，但not in android版.

Code:个

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View style={{flexDirection:'column',flex:1,borderWidth:1,borderColor:'#FFF'}}>
      <View style={{flex:1,borderWidth:1,borderColor:'yellow'}}>
        <Text style={{fontSize:12,color:'#FFF',borderColor:'green',borderWidth:1}}>test text goes here</Text>
      </View>
      <View style={{flex:1,borderWidth:1,borderColor:'yellow'}}>
      </View>  
    </View>
</ScrollView>

Result below:个

Reactnative React Native 中的视图与 Flex 不占用相同的高度空间

推荐答案

React-native相关问答推荐

在AWS-Amplify js v6中检索原始的accesToken和idToken

Reaction-原生NavBottom设计背景

ios 中节列表中的scrollToLocation 不起作用.在 Android 上，列表滚动回索引 0，但在 ios 上不会发生同样的情况

React Native 组件中两次使用map的问题

我们应该在 react-native 移动应用程序中使用哪个图标库

react native 如何更新倒置平面列表的数组中的项目

TypeError：未定义不是对象(判断'theme.spacing [radius]')

React Native Navigation const { navigate } = this.props.navigation;

React-native 重置数据库

withNavigation 只能用于导航器的视图层次 struct

React-native 解码 base64 编码字符串

如何使用 React Navigation 使 TabNavigator 按钮推送模态屏幕

如何在不使用 JSX 的情况下在 React Native 中制作组件？

如何将样式传递给 React-Native 中的容器组件

尽管 TypeScript 编译器错误，为什么我的 React Native 应用程序构建成功？

如何在 React Native 中将图像放置在其他图像之上？

react-native：多色文本视图

当前未启用语法nullishCoalescingOperator

Gradlew bundleRelease 不会在 react-native 中生成发布 apk

如何修复 npm 审计修复问题？