React Native Flex: 1不会填满整个屏幕
是指在React Native开发中，使用Flex布局时，设置某个组件的flex属性为1时，该组件不会自动填满整个屏幕。
Flex布局是一种用于在容器中进行灵活的布局的方式，它可以根据容器的大小和子组件的属性来自动调整子组件的位置和大小。在React Native中，使用Flex布局可以方便地实现响应式的界面布局。
当设置某个组件的flex属性为1时，表示该组件在容器中占据可用空间的比例为1。如果容器中只有一个子组件设置了flex属性为1，那么该子组件会占据剩余的可用空间，填满容器的剩余部分。但是如果容器中存在多个子组件都设置了flex属性为1，那么它们会平均分配可用空间，不会完全填满整个屏幕。
如果希望某个组件填满整个屏幕，可以将其flex属性设置为1，并且将其父容器的flex属性也设置为1。这样，该组件就会占据整个父容器的可用空间，从而填满整个屏幕。
React Native提供了一些其他的布局组件，如View、ScrollView等，可以用来实现更复杂的布局需求。在使用React Native进行开发时，可以根据具体的需求选择合适的布局组件来实现灵活的界面布局。
腾讯云提供了云开发服务，其中包括云函数、云数据库、云存储等产品，可以帮助开发者快速构建和部署React Native应用。具体可以参考腾讯云云开发产品介绍：https://cloud.tencent.com/product/tcb
相关·内容
1回答
选择器的位置在反应本机视图上是错误的。
ios、react-native、picker
我遵循这个，在其中一个示例中，他使用一个选择器来选择屏幕中的数据。当他尝试的时候，它看起来很有效，但是现在当我尝试渲染它的时候，我得到了一个奇怪的结果。
如果我完全按照他的代码进行选择，那么在做了一些更改之后，我让它在正确的位置显示，但是现在它被压缩了，这仍然是不正确的：
在如何呈现它方面，我肯定做错了一些事情，下面是代码()：
import React from 'react';
import {Picker, Text, StyleSheet, View} from 'react-native';
import {connect} from
浏览 0提问于2018-03-08得票数 2
回答已采纳
1回答
我需要一张图像来占据它最大的空间，而不管它的原始大小。
css、react-native、flexbox
我正在开发一个反应本机应用程序，我有一个顶部条和底部栏。这两条之间有一个图像，我需要它占据最大的空间，它可以不考虑图像的原始大小，而不妨碍这两条。我已经试了一段时间了，我不知道该怎么做。
我已经尝试了一堆与柔性盒和设置图像大小的东西，但我无法使它工作。
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import Topbar from './topbar.js'
export default function Ap
浏览 0提问于2019-07-13得票数 0
回答已采纳
1回答
设置文本区域高度以占据屏幕的其余部分
react-native、native-base
我是第一次接触react-native。构建一个Hello World应用程序，让我精通原生的react。在屏幕上，我希望有一个文本框，在它下面有一个按钮，在按钮下面有一个文本区域，它将占据屏幕的其余部分。我不知道我该怎么做。
浏览 2提问于2019-04-23得票数 3
1回答
如何在Android上布局滚动视图和图像
android
我想要一个屏幕，其中大部分是一个ScrollView占据了80%的屏幕，而较低的20%是一个图像。在ScrollView中，我希望能够在末尾的按钮上堆叠一个很长的文本。(可以将其视为一个调查应用程序。)
我无法获得正确定位滚动视图和图像的布局。当我使用wrap_content或fill_parent时，ScrollView总是将图像推出屏幕，因为它包含的文本比屏幕长得多。
如何正确地强制图像停留在屏幕上并限制ScrollView的大小？
浏览 2提问于2011-09-25得票数 0
回答已采纳
3回答
React native flex box未使用所有可用空间
android、ios、reactjs、flexbox、react-native
我有一个布局，我想要全屏显示。这就是它现在的样子：
我想要的是布局占据屏幕上的所有空间(所以提交按钮应该在底部)。我正在尝试使用{flex: 1}，但它不起作用。代码如下：
'use strict';
const React = require('react-native');
const {
StyleSheet,
Text,
View,
BackAndroid,
TextInput,
TouchableNativeFeedback,
ScrollView
} = React;
const ActionButton = r
浏览 5提问于2015-12-14得票数 17
1回答
Xamarin.Forms -如何阻止图像从网格扩展？
xamarin、xamarin.forms
我有这样的布局:堆栈(vert选项:开始) -Grid (vert选项:开始) Row Star -Image (Aspect.AspectFill) Row Star
2秒行就是空的。我还尝试在长度为1和2的2行的c#中这样做，但也有同样的问题。
我的意图是让第一行占据当前堆栈大小的垂直空间的1/3。然后图像就会完全填满这个空间。
但是，图像不是仅仅占用堆栈的1/3行，而是最终扩展了网格和堆栈，并且堆栈要大得多。
实现这一目标的最佳方法是什么？
浏览 6提问于2017-01-11得票数 3
1回答
如何设置使用flex的列宽度
javascript、css、reactjs、bootstrap-4、less
我正在开发的react应用程序的样式比较少，所以在包装器下面我有3列，比如leftWrap是col-3，rightWrap是col-4，rest宽度是centerWrap。我如何应用flex，而我只知道它的-*类名
<div className={styles.Home__wrapper}>
<div className={styles.Home__leftWrap}> .... </div>
<div className={styles.Home__centerWrap}> .... </div>
浏览 2提问于2021-06-02得票数 0
回答已采纳
1回答
在Java中使用布局
java、swing、layout、awt、layout-manager
我有一个带有布局BorderLayout的BorderLayout，我使用BorderLayout.CENTER添加了JPanel，我有一个JPanel(添加了使用中心)，它使用GridLayout放置4个按钮。
这些按钮很大，占据了整个屏幕。或者，我的方式如下：
我有一个布局为null的JFrame，我设置了JPanel边界并添加它们。
我有一个JPanel:它设置了自己的界限，所以它占据了屏幕中心的1/2，并且只有屏幕的1/8高。
它使用网格布局添加按钮，并生成一个很好的按钮行。
显然，第二个选项看起来更好，但我希望符合规范，并且总是使用布局.如何将定制和布局混合在一起
浏览 3提问于2013-02-21得票数 1
回答已采纳
2回答
带角度路由器插座的flex布局(flexbox)
angular、css、flexbox、angular-flex-layout、router-outlet
我试着把两个元素放在一起，其中一个占据了屏幕的25%，另一个是棱角路由器插座，占据了容器的其余部分。使用以下代码结束时，两个元素都位于屏幕的两边，中间有空格。**部分就是有问题的部分
<div class="container"
fxLayout>
<admin-route-menu fxFlex="25%" fxShow.lt-sm="false"></admin-route-menu>
<router-outlet fxFlex></router-ou
浏览 17提问于2017-12-27得票数 7
回答已采纳
1回答
如何用FlexBox制作粘性页脚并作出反应
html、css、react-native、flexbox
我用的是带有Flexbox的本机路由器。我想展示的是，FlatList最终占据了全屏和粘性页脚。我试图为FlatList指定flexGrow: 1，为视图页脚指定flexShrink: 0，但它不起作用。我正在构建世博应用程序，并在iPhone上查看结果。
import React, {Component} from 'react';
import {
Text,
View,
FlatList,
} from 'react-native'
import {Provider} from 'react-redux'
import {Nat
浏览 0提问于2018-05-17得票数 1
回答已采纳
2回答
如何让布局占据1/2的屏幕？
android、layout
我很好奇，如果我想要一个布局占据屏幕的右侧，而不考虑屏幕的大小，我需要做什么。
我必须把一些权重为1的空元素放在左边吗？或者，是否可以只指定布局与其父布局的右侧对齐并占据一定的百分比？如果是这样的话。多么?理想情况下，父对象是RelativeLayout，但我将使用任何可行的解决方案，因为目前我尝试的所有内容都会导致完全错误的结果。
浏览 0提问于2012-05-19得票数 0
回答已采纳
5回答
颤振:如何修正“RenderFlex被像素溢出”的错误？
android、dart、flutter、flutter-layout
我正在使用GridView在我的Flutter应用程序显示图像和他们的标题。请检查下面的代码。
import 'package:flutter/material.dart';
import '../common_ui/search_bar.dart';
class PurchaseProductsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return PurchasePro
浏览 1提问于2019-03-20得票数 24
回答已采纳
2回答
React本机映像占据了所有可用的垂直空间
android、react-native、layout、react-native-android
我刚接触react-native (2天前开始)，但我很快就学会了，因为我已经了解了常规的react。我正在尝试写一个现实世界的应用程序，我不知道如何正确地放置一个图像，我希望我的图像标签占据屏幕上所有的水平空间，但我也希望它留在屏幕的顶部，并保持它的纵横比(我不能硬编码，因为我也会显示其他车牌图片，包括不像北美那样2/1的欧洲车牌)，所有这些都不会让实际的图像占据所有可用的垂直空间。
下面是我的代码所呈现的内容和我实际需要的内容的GIMP编辑：
下面是我的渲染函数：
export default class App extends Component {
...
render()
浏览 9提问于2019-07-05得票数 1
回答已采纳
1回答
为什么视图会自动采用100%的宽度？
react-native
我试图将一个View封闭在另一个View中，但即使我没有指定它，封闭的View仍然占据了100%的宽度。 ? 我的主文件 import React from "react";
import { Text, View, Image } from "react-native";
import style from "../styles/screens/RegisterStyle";
export default function SignupRegisterScreen(props) {
return (
<View s
浏览 27提问于2021-07-19得票数 0
6回答
flex本机样式表：{flex:1}做什么？
flexbox、react-native
反应本机使用柔性箱的布局。在我看到的所有例子中，他们都会这样做：
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row'
}
});
我对flex: 1部分很好奇。根据Coyier在这里的定义-- ，flex: 1应该与flex-grow: 1相同，但在我看来，flex: 1在ReactiNative中相当于CSS中的display: flex。
下面是一个CodePen，它演示了flex: 1反应本机示例的方式--使用它在CSS中什么都不做：
直到我们在C
浏览 7提问于2015-09-18得票数 73
回答已采纳
5回答
如何在使用Flex的Components中响应本机？
css、reactjs、flexbox、react-native
我很难使用CSS在屏幕上集中我的组件。
见我的App.js
import { Container } from 'native-base';
import React from 'react';
import { StyleSheet } from 'react-native';
import Screen from './ScreenContainer';
const styles = StyleSheet.create({
container: {
backgroundColor: '#FF6666&#
浏览 5提问于2018-04-22得票数 18
回答已采纳
1回答
我正在尝试使用React-Native在屏幕底部放置按钮，我真的很难理解如何正确地使用flex支持
javascript、react-native
我正在尝试使用React-Native构建一个应用程序，我需要在屏幕底部放置两个相邻的按钮。到目前为止，我写了以下代码： render() {
const { subtitle } = this.state;
return (
<View style={styles.container}>
<ActionBar onBackAction={this.backActionHandler} isBackAvailable />
<View
浏览 27提问于2019-02-17得票数 0
回答已采纳
1回答
代号为one的图片可扩展为适合容器大小的按钮
codenameone
我正在用开发一个应用程序
现在我有了一个表单。
1)我将布局设置为网格布局。网格为2 x 3 (2行和3个cols)
2)我添加了6个按钮，这些按钮占据了6个单元格。每个按钮都有一个与之相关联的图像和文本。
3)我以这样的方式设计了这些按钮，它们现在没有borders.So，这些按钮实际上没有按钮的外观和感觉。它们看起来就像图片，下面有一些文字。
4)现在这些图像不会占据整个屏幕。因此，如果我有一个非常大的屏幕的android，我在第一行看到3个图像，一个非常大的差距，然后在第二行看到3个图像。
5)我预计，如果我不小心单击了第一行和第二行之间的任何地方(在两行按钮/图像之间的空隙中)，应该不
浏览 0提问于2012-07-24得票数 2
回答已采纳
1回答
使子容器占用父容器的高度[React Native]
react-native、flexbox
我在react原生中创建了一个<View>对象，其中一行包含多个包含text对象的<View>对象。 当文本超过一行时，文本容器不会扩展以填充父组件，因此看起来很滑稽。 截图： ? 这是样式代码： bigContainer: {
flex: 1,
justifyContent: 'center',
// flexDirection: 'row'
},
textContainer: {
flex: 1,
paddingLeft: 0,
paddingRight: 0,
浏览 34提问于2019-01-18得票数 2
回答已采纳
1回答
如何“锁定”组件在反应本机屏幕上的位置？
react-native
我正试图在我的社交网络应用程序上构建一个用户的个人资料屏幕。我想要的方式是屏幕的顶部1/3是用户配置文件信息，底部2/3是所有用户帖子的平面列表。目前，我有所有的工作逻辑明智。下面是应用程序的截图：
如您所见，用户配置文件信息显示在顶部，用户的帖子历史记录在下面的平面列表中正确显示。然而，平面列表正在将用户配置文件信息“向上”推到屏幕上。
下面是配置文件的代码：
class Profile extends React.Component {
constructor(props) {
super(props)
this.state = {
user:
浏览 0提问于2020-12-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
