FlexBox (React Native)布局问题:如何在2行上垂直对齐项目
FlexBox是一种用于在React Native中进行布局的强大工具。它提供了一种简单而灵活的方式来管理和控制项目的位置和大小。
要在两行上垂直对齐项目，可以使用FlexBox的属性来实现。以下是一种可能的解决方案：
- 首先，将容器视图的flexDirection属性设置为"column"，这将使项目在垂直方向上排列。
<View style={{ flexDirection: 'column' }}>
{/* 项目1 */}
<View style={{ flex: 1, alignSelf: 'center' }}>
{/* 项目内容 */}
</View>
{/* 项目2 */}
<View style={{ flex: 1, alignSelf: 'center' }}>
{/* 项目内容 */}
</View>
</View>- 接下来，将每个项目的flex属性设置为1，这将使它们平均分配可用的垂直空间。
- 最后，使用alignSelf属性将项目的对齐方式设置为"center"，这将使它们在垂直方向上居中对齐。
这样，两个项目将在两行上垂直对齐，并且在每一行中居中对齐。
FlexBox在React Native中的应用场景非常广泛，可以用于创建各种复杂的布局。它可以帮助开发人员轻松地实现响应式设计，适应不同屏幕尺寸和方向的设备。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发人员构建和部署他们的应用程序，并提供高可用性、可扩展性和安全性。
关于FlexBox布局问题的更多信息，您可以参考腾讯云的官方文档：FlexBox布局。
相关·内容
3回答
React Native -垂直居中的文本和底部的按钮
javascript、reactjs、react-native、layout
我需要有一个布局，我有一个垂直对齐的文本在中心和按钮在右下角：
注意:文本应该在整个视区内垂直对齐-从顶部到类似bttom的位置，例如，按钮有一个绝对位置，并且在流之外(为了避免使用绝对定位)
尝试为容器使用flexDirection: "column"和alignItems: "center"，为按钮使用marginTop: "auto"，但这只会按下底部的按钮
另一个方向的一些实验：
<View style={styles.container}>
<Text style={styles.tex
浏览 0提问于2019-08-09得票数 0
18回答
ReactNative:如何将文本居中？
reactjs、flexbox、react-native
如何在ReactNative中将文本在水平和垂直方向居中？
在justifyContent="center"和alignItems="center"不起作用的rnplay.org中，我有一个示例应用程序：
文本应该居中。为什么在文本(黄色)和父容器之间有一个顶部的空白处？
代码：
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var
浏览 374提问于2016-06-01得票数 290
回答已采纳
1回答
文本不会在React Native中垂直居中？
react-native
由于某种奇怪的原因，我无法在React Native中让文本在一个按钮中垂直居中： <View style={styles.container}>
<TouchableOpacity
style={[styles.button, styles.shareButton]}
>
<View style={styles.shareButtonInner}>
<Text style={[styles.buttonText]}>
Button which wraps
</Text&g
浏览 10提问于2020-04-09得票数 1
回答已采纳
1回答
垂直对齐中心内飞行方向行中的项目
javascript、css、react-native、flexbox
我在视图中有一些图标按钮，通过父视图上的flex方向行将其推到容器的右侧。目前，我无法在容器中间垂直对齐它们。下面是我的代码：
JSX:
<View style={styles.groupContainer}>
<View style={styles.groupTextContainer}>
<Text style={styles.groupText}>{title.toUpperCase()}</Text>
</View>
<View style={styles.groupButtonsContainer}
浏览 2提问于2017-07-20得票数 0
2回答
如何使用React Native和Flexbox制作正方形网格？
react-native、flexbox、react-native-stylesheet
我想使用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
1回答
来自react-native-elements的样式卡:垂直对齐标题和图标
javascript、react-native
我使用的是来自react-native-elements的Card。原来我想在它的标题旁边添加一个图标，但我不能让它看起来很漂亮。下面是我的代码： <Card
//title={this.props.item.offer.amount + " " + this.props.item.request.good}
title={
<View style={{justifyContent: 'center'}}>
<View style={{display: "flex",flexDirection
浏览 17提问于2020-10-24得票数 1
回答已采纳
2回答
将文本垂直放置在“反应-本机”中
javascript、react-native
如图中所示，文本10 shares位于左上角。我想把10股垂直集中。我已经尝试了一些方法，使之达到黄色视野的中心。
render() {
return (
<View
style={styles.grandParentView}>
<View
style={styles.parentView}>
<View
style={st
浏览 0提问于2019-07-12得票数 0
回答已采纳
1回答
像素手机背景色的造型
reactjs、react-native
我想把公司的标志从左上角延伸到右上角，宽度为10。下面是我的代码。我的形象不太好。它显示在屏幕中央，宽度在phone.If之外，我把位置:绝对，然后图像消失在手机上。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linkin
浏览 0提问于2018-04-23得票数 2
回答已采纳
6回答
React本机文本组件不会在视图组件中居中
ios、text、view、center、react-native
嗨，我想这应该很简单，但我不能让它工作。似乎无论我做什么，我都不能让文本组件在视图中水平居中。我已经尝试使用alignItems:center，justifyContent:center，alignSelf:center，textAlign:center...毫无办法。我可以让它垂直居中，但不能水平居中。亲爱的主啊，为什么？
<Animated.View style={[styles.titleContainer]}>
<Text style={styles.title}>App logo here</Text>
</Animated.View
浏览 3提问于2015-11-03得票数 5
2回答
如何在TouchableOpacity中垂直对文本进行居中？
javascript、css、reactjs、typescript、react-native
我正试图在TouchableOpacity中垂直地居中文本，但很难为我完成它。
我的App.tsx：
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { CustomButton } from "./src/components/CustomButton";
export default function App() {
浏览 4提问于2021-07-02得票数 0
回答已采纳
1回答
使本机Flexbox堆叠视图相互影响
reactjs、flexbox、native
我怎么把这3个盒子叠起来呢？
我尝试了所有这些设置，但没有帮助justifyContent: 'center', alignContent: 'center',alignSelf: 'center'
代码：
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {
浏览 0提问于2018-10-26得票数 1
1回答
FlatList中的样式
react-native
我正在尝试在我的FlatList中显示大楼的图像以及地址、电话号码和一些链接。如果我把这一行放到我的flatList中：
<View style={{flex:1, flexDirection: 'row'}}>
然后，它在一行中显示图像和所有地址行，并且我在flatList上看不到电话号码和其他数据。如果我将它们放在单独的行中，那么我就会得到图像和图像下面的所有数据，包括地址、电话号码。我想把图像放在左边，就像它现在正在显示的那样，然后在它的右边显示地址，电话号码和在线和方向链接
下面是我的带有样式表和图片的代码：
_renderItem = ({item,
浏览 12提问于2018-09-13得票数 2
回答已采纳
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
回答已采纳
1回答
具有垂直和横向可滚动内容的本机ListView似乎不再适用于react -本机0.28 (Reacti15.1.0)
listview、react-native、flexbox
由于React本机上一次发行版0.27 > 0.28 (和direction 15.0.2 > 15.1.0)，包含垂直和横向可滚动内容的ListView现在只能朝一个方向滚动：
如果listView是用flexDirection = "row“定义的，则listView可以水平滚动，但可以返回到固定高度位置，从而避免了listView垂直向下包含的内容。
如果listView是用flexDirection =“列”定义的，则listView可以垂直滚动，但返回到一个固定宽度位置，这样就无法看到listView水平地更左地包含了什么。
样本：
export
浏览 9提问于2016-06-23得票数 0
3回答
使用可点击的项目反应原生FlatList
javascript、react-native
我正在为react-native FlatList构建自定义线条样式。
我希望用户在单击行文本时导航到项目详细信息，或者在单击右侧插入符号时导航到另一个页面(向下钻取下一层)，如下所示：
下面是我当前的list components代码：
class MyList extends Component {
handleShowDetails = index => {
...
};
handleDrillDown = index => {
...
}
render = () => {
let data = // What
浏览 0提问于2018-06-04得票数 0
1回答
反应原生文本对齐并居中
react-native、text-align
在react native中，我们有textAlign属性，可以选择"justify“(最后一行将遵循默认的文本方向)或" center”(文本居中，但行没有对齐)。我想知道是否有一种方法可以将这两行合并在一起(即，将文本居中，并使行均匀地开始和结束)？
编辑:这是从“React”导入react的代码；从“react-native”导入{ StyleSheet，Text，View，ScrollView，StatusBar }；
export default function App() {
return (
<View style={styles.backgroun
浏览 1提问于2021-02-04得票数 0
1回答
无法在android中将文本与原生react对齐
android、react-native
由于某些原因，我无法使用原生react在android中对齐文本。我的代码运行的很好iOS，但不是android有人知道为什么或者修复了吗？
布局
<View style={styles.viewOC}>
<Text style={styles.leftText}> Left</Text>
<Text style={styles.rightText}> Right</Text>
</View>
样式
...
viewOC: {
paddingTop: 8,
fle
浏览 14提问于2021-02-23得票数 0
1回答
将边距添加到Flex-Start React-Native的右边缘
css、react-native、flexbox
import React, { Component } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import {
CheckBox, Container, Content, Text, View, Button,
} from 'native-base';
import Fonts from '../common/Fonts';
const checkAllMargin = Dimensions.get('windo
浏览 16提问于2019-05-21得票数 0
回答已采纳
1回答
使用flexbox垂直和水平对齐图像
css、react-native、flexbox
使用React-Native时，我需要将Image和组件LYDSceneQuestion居中
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextB
浏览 6提问于2017-07-19得票数 0
1回答
如何在react native中将flexbox用于文本组件？水平换行，垂直增量
javascript、reactjs、react-native、flexbox
我试图在react native中产生一种效果，给定特定的文本数组，它会换行，同时垂直增加大小，为下一个单词创建一个新行：
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const styles = StyleSheet.create({
container: {
flex: 0.3,
flexDirection: 'column',
justifyContent: '
浏览 0提问于2018-06-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
