React Native中的Flexbox 'flex‘属性
在React Native中，Flexbox是一种用于布局的弹性盒模型。'flex'属性是Flexbox布局中的一个重要属性，用于定义弹性元素在主轴上的伸缩能力。
Flexbox布局是一种响应式的布局方式，可以根据不同屏幕尺寸和设备方向自动调整布局。通过设置'flex'属性，可以控制弹性元素在主轴上的占据空间比例。
'flex'属性接受一个数字作为值，表示弹性元素在主轴上的占据空间比例。默认情况下，所有弹性元素的'flex'属性值为0，表示它们在主轴上不会伸缩，宽度或高度由内容决定。当某个弹性元素的'flex'属性值大于0时，它会根据自身的'flex'属性值与其他弹性元素的比例来分配剩余空间。
具体来说，'flex'属性的值可以为以下三种情况之一：
- 数字：表示弹性元素在主轴上的占据空间比例。例如，如果一个容器中有两个子元素，一个'flex'属性值为1，另一个为2，则前者占据的空间将是后者的一半。
- 'none'：表示弹性元素在主轴上不会伸缩，宽度或高度由内容决定。
- 'auto'：表示弹性元素在主轴上会根据剩余空间自动伸缩，占据空间比例由其他弹性元素的'flex'属性值决定。
使用Flexbox布局和'flex'属性可以轻松实现各种复杂的布局效果，例如水平居中、垂直居中、等分布局等。
推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mpp）
以上是关于React Native中的Flexbox 'flex'属性的完善且全面的答案。
相关·内容
我很难使用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
回答已采纳
我想要一个具有Svg图形在顶部和一些文字解释它的图形下的页面。文本很长，因此页面必须能够滚动。当我在Svg元素上使用固定的宽度和高度时，它可以工作，但我想使用flex。
这是一个使用简单矩形而不是图形的示例。Svg矩形不显示：
import React, { Component } from "react";
import { StyleSheet, View, Text, ScrollView} from "react-native";
import Svg,{ Rect} from 'react-native-svg';
export d
浏览 0提问于2018-03-05得票数 2
我是react-native的新手，正在学习一个教程。由于某种原因，当我为容器设置flex:1时，内部标记中的文本没有显示在屏幕上。但当我将其注释掉时，我可以看到文本。 ? 下面是代码。 import React from 'react';
import { View, Text, StyleSheet, Dimensions} from 'react-native';
export default function SignInScreen(){
return(
<View style = {styles.contai
浏览 41提问于2021-08-03得票数 0
回答已采纳
我做react native已经有一段时间了，在不同的设备上运行我的应用程序后，所有的组件都不完全是它们的样子，这是一个例子： import React from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/nati
浏览 31提问于2021-04-12得票数 0
尝试在React Native上使用flexbox的order属性，但遇到错误"order is not a valid style property"。
const styles = StyleSheet.create({
// ...
myFlexItem: {
order: 2
},
});
CSS order的文档如下：，React Native上有类似的东西吗？
浏览 5提问于2017-10-05得票数 0
如果用户有iPad或iPhone，我想显示与正方形独立的相同网格，相应地增加正方形的大小。
我不想检测设备并根据屏幕大小更改方块的宽度和高度。可以只使用React Native的css flex功能吗？
这里是
浏览 1提问于2016-09-16得票数 1
? 我正在阅读React Native中的Flex布局，但我仍然无法让中间(白框)使用任何可用的剩余(没有固定的宽度，因为不同的设备将具有不同的宽度)。也在努力让绿色的盒子总是走到尽头。我该如何布局它呢？
浏览 45提问于2021-01-23得票数 0
1回答
我想让应用程序具有响应性。如何在react原生中做到这一点?我需要在每个屏幕上编写响应代码吗?以下是在仿真器上测试时的屏幕截图。
此外，当我在荣誉的基础上构建时，我得到了以下内容。我想要的正是我在emulator.Please帮助中得到的，我该如何编写代码来使其响应呢？
以下是此屏幕的代码
import React,{Component} from 'react';
import {Text, View, AsyncStorage, TouchableOpacity, StyleSheet, Image} from 'react-native';
impor
浏览 5提问于2018-11-10得票数 0
4回答
我试着在Flexbox (和React Native)中创建这个布局，但是我不能让它工作。具体地说，无论我做什么，左右按钮都不会扩展到容器宽度的50%。它们始终是其内容的大小。
我使用的是嵌套容器。按钮位于柱状Flex容器中，该容器嵌套在也包含图像的行Flex容器中。
这是我的JSX：
<View style={{
display: 'flex',
flex: 1,
flexDirection: 'column'}}>
<Image
style={{flex: 1, zIndex
浏览 4提问于2018-03-28得票数 5
我想使用Flexbox用React Native创建以下网格。
我试着用下面的代码创建这个网格(参见的代码和工作版本)，但我得到的矩形间距不正确，如下所示：
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
const Cell = () => {
return (
<View
styl
浏览 2提问于2020-03-22得票数 0
我试图调整我的布局屏幕与柔性盒，但有不必要的空间之间的组件子。
import React,{Component} from 'react';
import { View,Image,StyleSheet,Dimensions } from 'react-native';
import { Card,Button,Avatar } from 'react-native-elements';
export default class WelcomePage extends Component {
render() {
cons
浏览 0提问于2018-04-08得票数 0
回答已采纳
我有一个带有两个文本框的div。
<div>
<input ... />
<input ... />
</div>
问题是它们会显示在彼此的下方。
注意:我没有使用React-Native，也没有使用Flex。
我怎样才能把它们放在一起？
浏览 0提问于2018-01-24得票数 2
回答已采纳
我正在使用react本机，并正在做一个电影应用程序。只是有一个问题，如何制作它，使所有的卡片是相同的宽度，无论电影的标题扩大多长时间。我尝试过添加溢出：“隐藏”属性，但这不会起到任何作用。我会给大家看一张这个问题的图片。如果你看顶级电影部分，西班牙电影的标题与其他片名相比是非常长的，这张卡片扩展得更远了。提前感谢！
这是我的密码
import React, { useState , useEffect} from "react";
import { View, Text, StyleSheet , FlatList, TouchableOpacity, Image}
浏览 4提问于2020-05-08得票数 0
回答已采纳
import React, { Component } from 'react';
import { View, Text, FlatList, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
const data = [
{id: 'Music', value: 'Music'},
{id: 'Events', value: 'Events'},
{id: 'About Us'
浏览 23提问于2019-10-01得票数 0
回答已采纳
2回答
css居中方框，不对齐居中
、、、、
import React from 'react';
import { render } from 'react-dom';
const styles = {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
};
const item = {
width: '26%',
}
const container = {
marginLeft: 'auto',
margi
浏览 0提问于2017-11-06得票数 1
1回答
react原生中的样式和布局帮助
、、、、
我是react native的新手，我正试图在react native中为我的主页创建一个布局，但我无法实现我的最终设计。以下是我面临的问题
1-镜像未加载到容器中
2-我不能得到小容器的正确阴影
3-当与最终输出匹配时，总对齐似乎是旧的。
import React from 'react';
import { StyleSheet,
Text,
View ,
Image,
ImageBackground} from 'react-native';
import LocalI
浏览 1提问于2018-02-01得票数 0
我在React中做了很多编程，我正在尝试React (仅在web上)，我不知道如何制作一个简单的视图，让所有的屏幕都能开始播放所有组件。
让我解释一下：
在React中，我使用flex处理视图维度，如下所示：
<View style={{ flex: 1 }}>
<View style={{ flex: 0.5, backgroundColor: 'blue' }}>
<Text>I'm a blue 50% screen View!</Text>
</View>
<V
浏览 0提问于2019-03-22得票数 6
回答已采纳
我开发了以下网站：https://konekto.world/first_use 正如你从网站上看到的，这张照片实际上没有居中，对手机来说太大了。正如您在下面的代码中所看到的，我尝试通过几种方法对齐它，但都不起作用。我将非常感谢你的帮助！ import React from 'react';
import { Grid } from '@material-ui/core';
import { Header } from '../Layout';
//import logo from '.../public/android-chrome-
浏览 101提问于2019-06-22得票数 0
1回答
我是react-native的新手，我正在尝试创建一个按钮网格，我可以在其中更改每行按钮的数量和按钮的总数。制作网格本身不是问题，但更改每行的项数就更难了。有没有人能给我一些建议，告诉我应该用什么来实现这个目标？我现在正在使用flex-box和ListView。
浏览 9提问于2016-08-24得票数 0
回答已采纳
来自React-Native菜鸟的问题：
我在一个React-Native应用程序中测试ScrollView，但我的ScrollView中的元素似乎不能呈现。如果我将ScrollView更改为视图，它们呈现得很好。我是不是错误地使用了ScrollView？
提前谢谢。
下面是我的代码：
import React from 'react';
import {ScrollView, StyleSheet, Text, View, Image } from 'react-native';
const Comp = (props) =>{
// backg
浏览 8提问于2019-08-19得票数 0
回答已采纳
1回答
我正在尝试将一个简单的TextView从Android的原生代码中显示出来，放到我的Javascript视图中。但是，应用程序无声地失败了，我只看到默认的"Hello“
RCTScannerViewManager.java
public class RCTScannerViewManager extends SimpleViewManager<TextView> {
public static final String REACT_CLASS = "RCTScannerView";
@Override
public String
浏览 6提问于2017-04-17得票数 12
回答已采纳
对于windows UWP的react-native，我有以下JSX： <View style={{ flexDirection: "row" }}>
<View style={{ flex: 1, flexDirection: 'column', margin: 5, alignItems: 'stretch' }}>
<View style={{ flexDirection: 'row' }}>
<Text selectable={tr
浏览 53提问于2021-03-21得票数 0
我刚接触React，作为一个爱好，我开发了一个MERN堆栈网站并部署到heroku。它在我的笔记本电脑和android手机上运行良好；但当我在iPhone6和iPhone7手机上试用它时，我注意到其中一个提交按钮没有出现。(Material-UI按钮)我认为如果代码中有错误，它在任何地方都不能正常工作。为什么在iPhone上会出现这样的问题？你能帮帮我吗？例如，我的帖子添加页面的代码
import React, { useState, useContext, useEffect, Fragment } from "react";
import {
generalContex
浏览 0提问于2020-08-24得票数 0
如何在lottie中同时居中显示文本和动画？我的加载动画有一点被切到右边。我试着跟随这里，但它不工作，
我的类看起来像这样：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { StyleSheet, View } from 'react-native';
import Loading from '../Components
浏览 54提问于2018-01-03得票数 4
2回答
页面在每个输入模糊时滚动到顶部
、、、、
我正在使用Expo和native-base用react-native开发一个简单的应用程序。我偶然发现了一个问题，我在任何文档中都找不到关于它的任何信息。 当我模糊任何文本输入、文本区域等时，页面总是快速滚动到顶部。它只在iOS上发生，在安卓上没有这样的问题。 如果之前有人问我这个问题，我真的很感激一些线索，我做错了什么。 我正在使用以下包： "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react": "16.5.0
浏览 19提问于2019-04-02得票数 1
回答已采纳
我发现css flexbox flex属性，即flex:1不像react一样工作--本机flex:1。它在react原生网格系统中的工作方式不同。需要帮助去理解
挠曲:1
作为反应-本土的观点。
浏览 1提问于2018-08-21得票数 1
如何使一列文本对齐，就像下面的图像一样--在react本机中？我尝试过将textAlign设置为“右”，并将alignSelf设置为“flex”，但它似乎不起作用。
浏览 5提问于2022-06-15得票数 0
我正在尝试整理我的flexbox布局，以便它与最新版本的IE/Firefox/Safari兼容，但我对Firefox/Safari有问题。
建议的布局：
-----------------
header
-----------------
|
|
|
nav | section
|
|
|
|
在火狐和Safari中，<section>位于nav之下
CSS：
body {
width:50%;
height:100%;
display: -ms-flexbox;
-ms-box-orient: h
浏览 0提问于2013-07-04得票数 6
回答已采纳
1回答
我有3个组件，我试图设置它们的高度(页眉，正文，页脚)，但当它渲染时，每个组件只有它包含的一行文本的高度。
import React from 'react';
import { View, Text } from 'react-native';
import Header from './Header';
import Body from './Body';
import Footer from './Footer';
import * as globalStyles from '../styles/gl
浏览 0提问于2017-04-02得票数 2
回答已采纳
我目前正在尝试创建一个侧边栏。我遇到的问题是，元素的容器“收缩到它的内容”。 我看过其他的解决方案，比如flex-grow，设置App.css html，body height为100%等等。但似乎什么都不起作用！ 在App.js中，App类呈现以下内容： return (
<Router>
<Navbar />
<Route path="/" exact component={Landing} />
<Route path="
浏览 15提问于2019-09-21得票数 1
回答已采纳
我目前正在做一个项目，我一直在使用flex
一切看起来都很好，但当您将视口缩小(大约1400px)时，您会看到列布局折叠。我怎样才能防止它们倒塌。我的css中没有媒体查询，所以不是因为媒体查询。
所有框的占位符：
#overview {
-webkit-box-flex: 4;
-moz-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
浏览 2提问于2014-11-28得票数 0
1回答
为什么-moz-box-flex在firefox中不能工作？我使用的是旧语法吗？我确实需要display -moz-box，否则我的整个布局不能在firefox中工作。它可以在chrome和safari中工作。怎么了？
.container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
display: -moz-box;
-webkit-flex-direction: column;
-ms-flex-direction: column;
浏览 0提问于2015-11-02得票数 0
2回答
我正试着制作一个关于React的应用程序--本地人
首先，我做了一些简单的工作，我想做一个底层导航
这就是我刚开始测试时所做的
import React, { Component } from 'react'
import {
StyleSheet,
View,
Text,
Image
} from 'react-native';
class MainScreen extends Component {
constructor () {
super ()
this.board
浏览 0提问于2018-11-16得票数 1
Flexbox布局有一个名为flex-basis的属性。根据的说法
This defines the default size of an element
before the remaining space is distributed.
It can be a length (e.g. 20%, 5rem, etc.) or a keyword.
React Native显然不支持此属性。我如何在RN中解决这个问题，或者更具体地说，我如何实现这样的布局：
在该图中，"1“、"2”等是列表的一部分，应该占用大约50%的可用空间，以便两个元素可以放在一行中，并在它
浏览 1提问于2016-02-16得票数 3
1回答
我是一个新的react-native框架，正在学习如何使用navigator。我尝试实现了两个应用页面之间的跳转。从“男孩”到“女孩”然后再回到“男孩”。以下是APP.js中的代码：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component, } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image
浏览 1提问于2017-10-29得票数 0
1回答
我使用Compass 1.0，当我执行@include display-flex;或任何其他与flex相关的属性时，我只得到
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
等等，没有-moz或-o前缀。知道为什么吗？
浏览 6提问于2014-07-02得票数 0
回答已采纳
1回答
我有一个这样的布局：
<div class="flexbox">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
以及它的css：
html,
body {
height: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
浏览 0提问于2016-05-22得票数 8
回答已采纳
1回答
我目前正在开发一个，它有两个主屏幕，主导航器是Tab Navigator。第二个主屏幕有自己的NativeStack导航器。我的问题是，第二航海家没有显示任何东西。我只是得到了一个空屏幕。
第二个屏幕代码：
import {DataTable, Header, Screen} from '../../components';
import {
NativeStackNavigationProp,
createNativeStackNavigator,
} from '@react-navigation/native-stack';
import {Scr
浏览 3提问于2022-01-29得票数 0
我还在学习react-native，并且想要将backgroundColor设置为整个屏幕，这是在app.js中导入的。 即使我将flex设置为1，高度覆盖屏幕，但宽度始终是中心，而不是覆盖整个屏幕。 下面是我正在做的事情： App.js import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Splash from "./S
浏览 5提问于2020-09-30得票数 0
我正在使用React-Native编写一个通用的iPhone/iPad应用程序。然而，当方向改变时，我很难正确地渲染我的视图。以下是js文件的源代码：
'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var CardView = require('./CardView');
var styles = React.StyleSheet.create({
con
浏览 1提问于2015-04-28得票数 22
我希望有一个柔性盒(容器，而不是项目)动画/过渡，因为它伸展和收缩，以适应不同数量的项目出现在其中。有办法让这一切成为可能吗？我只能在里面找到动画大小的解决方案，而不是柔性盒本身。
请参阅下面的场景片段：
const { useState } = React
const App = () => {
const [showSecondDiv, setShowSecondDiv] = useState(true);
return (
<div>
<button onClick={() => setShowSecondDiv(!s
浏览 2提问于2022-01-29得票数 0
大家好，我是REACT NATIVE的新手，我的react native应用程序中有一个类似下面代码的卡片样式。首先，我想把它分成两个水平部分，比例为(上半部分为3，下半部分为2)。第二，我想写下每个部分。我 import React from "react";
import {
Button,
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
} from "react-native";
export default function App() {
re
浏览 17提问于2021-08-21得票数 0
2回答
自定义响应组件-卡内的文本
、、、、
我正在尝试创建一个自定义的React组件:一个带有样式的“卡片”，它看起来像一个灰色矩形，里面有文本。
我会附加文件，但模拟器屏幕是白色的，它不显示背景图像与卡片与文字。如果我去掉卡片组件中的“默认”字，那么它只显示灰色卡片，但仍然没有背景图像。
有什么想法吗？谢谢!
那是App.js
import React from 'react';
import { Image, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { ImageBackground, Dimensions }
浏览 3提问于2022-06-15得票数 0
2回答
我正在尝试使我的肚脐条，我想在一个一行中显示两个react-selects，所以我这样做了
所有东西都在使用vanilla select，但是添加react-select破坏了我的样式
Navbar.js
import React, { useState } from "react";
import classes from "./Navbar.module.css";
import { useDispatch } from "react-redux";
import { selectAction } from "../../../sto
浏览 2提问于2020-10-06得票数 1
回答已采纳
我正在尝试构建一个移动应用程序，我在使用react原生导航v5时遇到了一些问题，在他们的文档中，我找到了这个示例代码，但两个代码(我的代码和oficial代码)都有相同的错误，请查看我的代码： // In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
浏览 143提问于2020-10-10得票数 0
回答已采纳
3回答
use strict';
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Camera from 'react-native-camera';
class BadInstagramCloneApp extends Component {
render() {
浏览 22提问于2016-08-24得票数 0
2回答
如何将react js卡片分开？
、、、、
I want to separate them and line up horizontally and vertically import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';
function Projects({projectsData}) {
return (
<>
{projectsData.map((index)=>{
浏览 20提问于2021-04-17得票数 0
回答已采纳
3回答
**我想将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。我希望将className Navbar_icon的div移到导航栏的右侧。Navbar_icon包含搜索、帮助、登录。**当前导航栏图片：< ? REACT COMPONENT JSX CODE :
<div className="Navbar">
<h1 className="logo">eat24/7</h1>
浏览 41提问于2021-10-21得票数 0
我是RN的新手，试着试着绕过它，经常犯错误。我现在被困在这：
我有一个家长的观点是这样的：
import React, { Component } from 'react';
import { View, Image, Text, Button } from 'react-native';
class ParentView extends Component {
render() {
return(
<View style={{flex:1}}>
<View st
浏览 1提问于2018-11-05得票数 0
回答已采纳
1回答
我正在尝试构建一个react应用程序。将有一个侧栏，然后是一个主要部分。在图中，侧栏在左侧，主要部分是右侧的所有内容。我希望侧栏是整个屏幕的35%，而主要部分是剩下的65%。因此，在我的app.js文件中，我有两个div，一个用于side，另一个用于main。在css中，我有flex: .35和flex: .65。我更改了每个div的背景颜色，并正确分配了空间。 到目前为止一切顺利，现在我遇到了关于flex的问题，主要部分的子组件。在主要部分，我希望顶部标题是20%，中间部分是60%，底部标题是20%。所以我为每个组件创建了3个div。然后，我分配了flex: .20、flex: .60和f
浏览 11提问于2021-02-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
