blocks|key|3055819|text|你可以试试这个；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3055820|<View+style={{flex:1,backgroundColor:'white'}}>
++<View+style={{justifyContent:'space-around'}}>
++++<View+style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>++
++++<View+style={{height:50,alignSelf:'stretch',backgroundColor:'pink',marginHorizontal:5}}/>++
++++<View+style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/>++
++</View>
++<View+style={{flex:1,alignItems:'center',justifyContent:'center',alignSelf:'stretch',backgroundColor:'blue',margin:5}}>
++++<Text+style={{color:'white',fontWeight:'bold'}}>
++++++View
++++</Text>
++</View>
</View>|code-block|syntax|javascript|3055821|​|3055822|📷|atomic|offset|length|3055823|3055824|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0e9b77eb42e7904da90792c0719ec65e.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

You can try this;

<pre><code>&lt;View style={{flex:1,backgroundColor:'white'}}&gt;
 &lt;View style={{justifyContent:'space-around'}}&gt;
 &lt;View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/&gt; 
 &lt;View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',marginHorizontal:5}}/&gt; 
 &lt;View style={{height:50,alignSelf:'stretch',backgroundColor:'pink',margin:5}}/&gt; 
 &lt;/View&gt;
 &lt;View style={{flex:1,alignItems:'center',justifyContent:'center',alignSelf:'stretch',backgroundColor:'blue',margin:5}}&gt;
 &lt;Text style={{color:'white',fontWeight:'bold'}}&gt;
 View
 &lt;/Text&gt;
 &lt;/View&gt;
&lt;/View&gt;
</code></pre>

<a href="https://i.stack.imgur.com/pUoNF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/pUoNF.png" alt="enter image description here"></a>

blocks|key|3055857|text|一个更简单的解决方案是在要填充剩余空间的视图上使用flexGrow:+1+属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3055858|3055859|+flexGrow描述了容器中的任何空间应该如何沿着主轴在其子级中分布。布局其子对象后，容器将根据其子对象指定的flex+grow值分配任何剩余空间。|blockquote|3055860|3055861|flexGrow接受任何浮点值>=+0，其中0是默认值。容器将在其子对象中分配所有剩余空间，这些空间由该子对象的flex+grow值加权。|3055862|https://facebook.github.io/react-native/docs/flexbox|3055863|3055864|DEMO|3055865|代码|3055866|import+*+as+React+from+'react';
import+{+Text,+View,+StyleSheet+}+from+'react-native';

export+default+class+App+extends+React.Component+{
++render()+{
++++return+(
++++++<View+style={styles.container}>
++++++++<View+style={styles.flexContainer}>
++++++++++<View+style={styles.box1}></View>
++++++++++<View+style={styles.box2}></View>
++++++++</View>
++++++</View>
++++);
++}
}

const+styles+=+StyleSheet.create({
++container:+{
++++flex:+1,
++++justifyContent:+'center',
++++padding:+8,
++},
++flexContainer:+{
++++backgroundColor:+'black',
++++height:+100,
++++flexDirection:+'row'
++},
++box1:+{
++++backgroundColor:+'blue',
++++width:+100,
++++height:+'100%25'
++},
++box2:+{
++++backgroundColor:+'red',
++++height:+'100%25',
++++flexGrow:+1
++}
});|code-block|syntax|javascript|3055867|entityMap|0|LINK|mutability|MUTABLE|url|1|https://snack.expo.io/HyeEI!5_L^0|0|10|11|3|P|B|0|0|0|0|0|0|1G|0|0|0|0|4|1|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|D]]|E|@]|F|$]]|$1|G|3|-4|5|6|7|1F|8|@]|E|@]|F|$]]|$1|H|3|I|5|J|7|1G|8|@]|E|@]|F|$]]|$1|K|3|-4|5|6|7|1H|8|@]|E|@]|F|$]]|$1|L|3|M|5|6|7|1I|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|1J|8|@]|E|@$9|1K|A|1L|1|1M]]|F|$]]|$1|P|3|-4|5|6|7|1N|8|@]|E|@]|F|$]]|$1|Q|3|R|5|6|7|1O|8|@]|E|@$9|1P|A|1Q|1|1R]]|F|$]]|$1|S|3|T|5|6|7|1S|8|@]|E|@]|F|$]]|$1|U|3|V|5|W|7|1T|8|@]|E|@]|F|$X|Y]]|$1|Z|3|-4|5|6|7|1U|8|@]|E|@]|F|$]]]|10|$11|$5|12|13|14|F|$15|O]]|16|$5|12|13|14|F|$15|17]]]]

A much easier solution is to use the attribute <code>flexGrow: 1</code> on the View you want to fill the remaining space.
<blockquote>
flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.
flexGrow accepts any floating point value &gt;= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the child’s flex grow value.
<a href="https://facebook.github.io/react-native/docs/flexbox" rel="noreferrer">https://facebook.github.io/react-native/docs/flexbox</a>
</blockquote>
<a href="https://snack.expo.io/HyeEI!5_L" rel="noreferrer">DEMO</a>
Code
<pre><code>import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component {
 render() {
 return (
 &lt;View style={styles.container}&gt;
 &lt;View style={styles.flexContainer}&gt;
 &lt;View style={styles.box1}&gt;&lt;/View&gt;
 &lt;View style={styles.box2}&gt;&lt;/View&gt;
 &lt;/View&gt;
 &lt;/View&gt;
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 padding: 8,
 },
 flexContainer: {
 backgroundColor: 'black',
 height: 100,
 flexDirection: 'row'
 },
 box1: {
 backgroundColor: 'blue',
 width: 100,
 height: '100%'
 },
 box2: {
 backgroundColor: 'red',
 height: '100%',
 flexGrow: 1
 }
});
</code></pre>

As you see the image, if the three red views are already added on the parent view. Now I want to add another blue view which can fill the rest space. How can I set the style?

<img src="https://i.stack.imgur.com/CqRRr.png" alt="enter image description here">

How to set the style attribution to fill the rest space?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如您所见，如果已在父视图上添加了三个红色视图。现在我想添加另一个蓝色视图，它可以填充休息空间。如何设置样式？​​

问如何设置样式属性来填充休息空间？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置样式属性来填充休息空间？EN