当我使用flexDirection:"row“时，我如何放置视图和图标呢？
当您使用flexDirection:"row"时，可以使用以下方法来放置视图和图标：
- 主轴对齐方式（justifyContent）：通过设置justifyContent属性来控制视图和图标在主轴上的对齐方式。常用的取值包括：
- flex-start：将视图和图标靠主轴起始位置对齐。
- flex-end：将视图和图标靠主轴末尾位置对齐。
- center：将视图和图标在主轴上居中对齐。
- space-between：将视图和图标平均分布在主轴上，首尾不留空隙。
- space-around：将视图和图标平均分布在主轴上，首尾留有空隙。
- 交叉轴对齐方式（alignItems）：通过设置alignItems属性来控制视图和图标在交叉轴上的对齐方式。常用的取值包括：
- flex-start：将视图和图标靠交叉轴起始位置对齐。
- flex-end：将视图和图标靠交叉轴末尾位置对齐。
- center：将视图和图标在交叉轴上居中对齐。
- stretch：将视图和图标在交叉轴上拉伸以适应容器大小。
- 视图和图标的宽度和高度：可以通过设置视图和图标的宽度和高度来控制它们在容器中的大小和位置。
- 弹性比例（flex）：可以通过设置视图和图标的flex属性来控制它们在容器中的占比。默认情况下，flex为0，表示不参与弹性布局。如果视图和图标的flex值不同，它们将按照比例分配剩余空间。
综上所述，当您使用flexDirection:"row"时，可以通过设置justifyContent、alignItems、宽度和高度、flex等属性来灵活地放置视图和图标。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
1回答
当我使用flexDirection:"row“时，我如何放置视图和图标呢？
react-native
在照片中可以清楚地看到，"8任务“和”事件“的文本不是从同一行开始的，即使我使用了justify-content:"space-between"，"+”图标也不会在同一行结束。我如何才能实现我想要的效果呢？ flex: 1, backgroundColor: "#FFFFFF",
浏览 10提问于2021-05-20得票数 0
回答已采纳
1回答
onPress React导航不适用于堆栈导航器中的组件
react-native、react-native-android、react-navigation、react-native-ios、stack-navigator
嘿，伙计们，对于Stacknavigator，我做了一个组件，并将其放在导航选项的headerRight中，因为我只能在那里显示一个图标。只是一个包含三个图标的视图。但是，当我尝试使用props.navigation.navigate函数执行onPress时，我得到了一个错误消息: undefined is not a object this.props.navigation.navigate我该如何</em
浏览 11提问于2018-01-24得票数 0
2回答
使用内联样式在React Native中定位组件
javascript、react-native
我正试着把比萨饼图标移到搜索栏的正右边。 我不仅无法将搜索比萨饼图标移动到搜索栏的右侧，而且根本无法移动它。这个主要的披萨图标在MainPage中是这样的： import React, { Component } from 'react';
<Accordion dataArray={dataArray} expanded={0}&
浏览 17提问于2019-05-02得票数 0
2回答
如何在文本输入中设置图标？
javascript、css、reactjs、react-native、ecmascript-6
我正在尝试在文本输入中设置一个图标。我知道，。 value={this.state.text} </View> borderWidth: 1, pad
浏览 2提问于2019-03-05得票数 1
2回答
ReactNative文本样式下一行
reactjs、react-native
简单地说，我试图在一列中用图标对齐3条文本。我想给博览会的图标一个小的边距顶部，这样它们就在每个文本元素的旁边。那么，如何使文本中的下一行与文本本身对齐，例如，学校中的(S)与第5中的(5)垂直对齐我尝试了一些普通的CSS，但没有成功，它能实现吗？
浏览 0提问于2019-07-27得票数 0
回答已采纳
2回答
用flexDirection对本机问题作出反应
react-native
我试图放置一个按钮(自定义组件由TouchableOpacity内部视图)和一个图像在一个view.....and让他们并排坐在一起。见下面的代码 style={{ borderWidth: 1, flexDirection:'row',> to_extraStyle={{
浏览 7提问于2019-11-02得票数 0
回答已采纳
1回答
我可以在一个视图中使用两个不同的flexDirection吗？
react-native、flexbox
我想要一个有3个按钮的视图，如下所示：所以我有这样的代码： <View style={{ flexDirection: 'column', alignItems: 'flex-end<CircleButton> </View>
<View style={{ margin: 16, alignItems: 'flex-end',
浏览 0提问于2016-09-06得票数 0
回答已采纳
1回答
如何使用React本机将图像和文本内联呈现？
javascript、react-native
如何获得与文本相同行的共享图标？ flex: 1, marginTop: 20, font
浏览 1提问于2018-03-24得票数 1
回答已采纳
2回答
在“反应本地人”中将直线置于图标下方
javascript、css、reactjs、react-native
这里有两个图标和一个虚线。目前，线是定位在图标顶部。如何将图标放在图标的前面和后面？180, top:0, alignSelf:'center',
flexDirection
浏览 2提问于2019-11-07得票数 0
回答已采纳
2回答
将文本与图像对齐- React Native
css、image、react-native
我尝试将每个图片下的社交图标文本对齐，如下所示：然而，我得到了以下结果：我将每一行作为单独的视图放置 justifyContent: 'space-between', paddingRight: 40,socialIconsText: {
浏览 66提问于2016-08-16得票数 1
2回答
如何在反应本机中使用合理的内容属性？
javascript、reactjs、react-native、jsx、styling
在这里，我试图将内容与image.But的左边对齐，我得到的是文本将在图像之后取出左空间。我期待float-align:left属性就像在css中的here.So一样，我使用了alignItems:flex-end.But，没有得到output.Is --我尝试过的任何做this.What的可能性如下onPress={() =>this.props.navigation.navigate('Article')}>
<CardSection
浏览 0提问于2018-07-25得票数 0
回答已采纳
2回答
Flex React Native --当内容到达边缘时，如何使用flex将内容换到下一行
flexbox、react-native
我在我的样式容器中有一个图标列表，这些图标显示在flexDirection:'row'中，但是当图标的数量超过视图宽度时，它们不会中断到下一行，而是继续显示在视图的右侧。如果内容达到最大宽度，我如何让内容换到下一行？设置样式： container: {
width: SCREEN_WI
浏览 1提问于2016-01-09得票数 43
回答已采纳
2回答
MapView -放置在彼此顶部的图标
javascript、css、reactjs、react-native
我在react-native中有一个google地图。在该视图的顶部，我在地图上有图标，这些图标被放置在彼此的顶部，而不是放置在地图的任何一侧。我尝试了许多不同的设置，但总是以相同的方式结束。另一件事是，当我没有点击按钮时，它会做出反应。container: { flexDirection: &
浏览 0提问于2018-05-07得票数 0
5回答
wrap本机:如何包装FlatList项
react-native、react-native-flatlist、react-native-flexbox
我有一个查询返回的术语列表。每个词都是一个词。目前，我的FlatList将每个单词呈现为同一行上的一个按钮(horizontal={true})，我希望这些按钮像普通文本那样包装。但是我绝对不想使用列特性，因为这看起来不太自然。这可能是FlatList的坏用例吗？还有什么其他的组件我可以用吗？</Button> </FlatList>
</
浏览 21提问于2017-08-05得票数 30
12回答
如何在TextInput中放置图标以响应本机？
javascript、react-native
我正在考虑这样的东西，在这个，你有图标，你按下显示密码为明文，而不是点。但是，我无法找到任何帮助我的自定义组件。我不想花太多时间在这么小的特性上，所以我想问的是，我还没有尝试过什么:我错过了一个自定义组件吗？如果没有，是否有一种简单的方法将子级添加到TextInput中？还是应该让TextInput和触摸屏并排出现呢？
浏览 7提问于2016-12-02得票数 97
回答已采纳
2回答
如何在React native中连接数组内的字符串响应？
reactjs、react-native、react-native-android、react-native-ios、react-native-flatlist
我正在访问一个内容列表中的一个字符串，我想用逗号连接这些字符串，但是每当我尝试这样做时，样式都会对web和移动设备都是无效的。下面是我写的代码 <View style={{flexDirection: 'row'}}>
{props.item.vaccine_list.map((item, i) =>{flexDirection: 'row&#x
浏览 24提问于2020-11-03得票数 3
回答已采纳
1回答
即使使用zIndex，也无法在“反应本机模式”中单击图标
react-native
我有一个问题，在视图中的两个物质图标/ touchables不能被点击。(请参阅带有视图和zIndex的代码部分。我可能只是把这些观点嵌套错了。当我添加zIndex时，它修复了IOS，但不适用于Android.
当我删除ZIndex时，它修复了安卓，但不适用于IOS.当我移除整体时，它对两者都起作用，但我失去了做空格的能力，因为我想把图标</em
浏览 1提问于2020-06-28得票数 0
2回答
图标的TouchableOpacity和onPress
javascript、reactjs、typescript、react-native、native-base
我正在尝试使用onPress作为图标。为此，我想使用TouchableOpacity，但当我单击该图标时没有任何反应。我没有看到任何控制台日志。 我还试着在另一个视图中包装图标，但也不起作用。); container: { },
浏览 22提问于2020-08-03得票数 0
2回答
反应标头中的原生图标，使其始终向左对齐
react-native、react-native-android、react-native-ios
我想在屏幕的左上角放置一个图标。在堆栈导航器的标题中...HomeScreen} options={({ route }) => ( { headerTintColor: config.foregroundColor, })} />
浏览 26提问于2021-02-02得票数 1
回答已采纳
1回答
React Native:如何在拥有renderRow()的同时将ListView的contentContainerStyle应用于renderHeader()来创建网格？
javascript、ios、react-native、react-jsx
我正在尝试遵循这一点：，但也使用renderHeader()。方法同时使用renderHeader()和renderRow()时，整个但是当我取出renderHeader()时，它完美地创建了renderRow()的网格，没有任何问题。那么，如何<
浏览 1提问于2016-07-23得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
