React Native:如果大于宽度百分比，则调整文本
React Native是一种跨平台的移动应用开发框架，它允许开发者使用JavaScript编写代码，同时在iOS和Android平台上构建原生用户界面。当在React Native中使用百分比来设置文本的宽度时，如果文本的宽度超过了父容器的宽度百分比，React Native会自动调整文本的大小以适应父容器。
React Native提供了一种名为Text的组件来显示文本内容。可以使用style属性来设置文本的样式，包括宽度、高度、字体大小等。当设置宽度为百分比时，React Native会根据父容器的宽度自动调整文本的大小。
例如，如果要将文本的宽度设置为父容器宽度的50%，可以使用以下代码：
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
width: '50%',
height: 200,
backgroundColor: 'lightgray',
justifyContent: 'center',
alignItems: 'center',
},
text: {
width: '100%',
fontSize: 20,
textAlign: 'center',
},
});
export default App;在上面的代码中，container样式设置了宽度为50%的父容器，text样式设置了宽度为100%的文本。当父容器的宽度改变时，文本的宽度会自动调整以适应新的宽度。
腾讯云提供了一系列与移动应用开发相关的产品和服务，包括云服务器、云存储、移动推送等。具体可以参考腾讯云移动开发相关产品的介绍页面：腾讯云移动开发
相关·内容
我正在开发一个React Native应用程序。我正在IOS上测试它，我在里面用过ModalDropdown，ModalDropdown的代码是：
<code>A0</code>
下拉列表如下所示：
<code>B1</code>
我希望下拉菜单与“请选择...”对齐。文本框。我试过改变"dropdownstyle“的宽度，但在不同的设备上不起作用，比如iPhone，iPad。我怎样才能让它在所有设备上都能正常工作。
浏览 31提问于2019-08-23得票数 0
回答已采纳
1回答
有一个react-native-extended-stylesheet库，但是它在安装时没有安装，会产生问题。是否有一个库或方法来使屏幕响应，根据屏幕大小调整图像和文本？
浏览 16提问于2022-08-08得票数 0
如何使用SafeAreaView来显示WebView？我试过这样做：
import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';
class ChaineYT extends React.Component {
render() {
return (
<SafeAreaView>
<WebVie
浏览 7提问于2019-10-28得票数 5
回答已采纳
我希望我的桌子的宽度是屏幕宽度的100% -这样就可以灵活地适应不同的屏幕尺寸。
可以让我的列按比例自动调整大小吗？
我试着给td的百分比宽度，但这似乎不起作用，firebug显示tbody没有填充表的宽度？
<table class="">
<tr class="headings">
<td class="entry">
</td>
<td class=&#
浏览 1提问于2010-04-07得票数 1
回答已采纳
如果在具有固定宽度的父div中有多个div，而子div宽度设置为固定父div的百分比，则有时子div不能在同一行上全部可见，但是子div的宽度百分比之和为100%。
HTML：
<div id="parent">
<div class="child" style="width:51.5%;">1</div>
<div class="child" style="width:0.58333333333333%;">2</div>
<div class=&
浏览 4提问于2014-10-27得票数 2
回答已采纳
我是初学者学生java开发者，我必须在java fx中创建简单的游戏。我想学习这一点，而不是使用模板或游戏的另一个作者。我对GridPane有个问题。所以我的应用程序中有8个元素。文本，标签和图像，但我的问题是在舞台上安排元素。例如，如果我尝试定位一个元素，其他元素就会丢失位置。我哪里做错了？
代码：
grid.setHgap(20);
grid.setVgap(20);
grid.setPadding(new Insets(10, 10, 10 ,10));
grid.add(welcome, 10, 0);
顺便说一句。gridPane适合简单的跳棋游戏吗？
浏览 0提问于2017-10-19得票数 0
react-native-material-menu我试着定制菜单，但是样式属性"width“没有处理-菜单仍然很窄。
return(
<View style = {{
width: 500
}}>
<Menu
ref = { this.setMenuRef }
button = {<RoundButton
buttonType = "menu"
navigateTo = "menu"
menuCall = {this.showMenu}
style
浏览 1提问于2019-10-13得票数 0
2回答
我试图在我的React Native项目中使用边距样式属性的百分比值，但它似乎减少了我的一个View组件的高度。如果我用一个绝对值替换百分比值，就不会再有问题了，它工作得很好。您是否尝试在React Native中使用百分比值作为边际？以下是重现此问题的一个小代码示例：
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
ren
浏览 18提问于2018-05-23得票数 19
如何在react native中获取元素的宽度？由于在react原生中没有宽度的百分比使用，如何获取元素或父元素的宽度？
浏览 2提问于2016-05-16得票数 12
正在尝试获取下面的图像：
但这是我所拥有的：
我按如下方式使用此代码：
HTML：
<div class="floatright" style="width: 50%;">
<div class="floatleft" style="width: 35%;">
<img src="images/exhibitingopportunities.png" alt="Exhibiting Opportunities" style=&
浏览 0提问于2013-03-29得票数 0
回答已采纳
自定义图形有哪些功能，例如条形图的宽度和条形图之间的间距。我想减少条形图和月份标签之间的差距。
有哪些函数可以执行这些更改？
浏览 0提问于2012-04-02得票数 0
回答已采纳
4回答
有谁能告诉我width和max-width之间的关系(比如哪种覆盖像素、百分比等等)？
如果我想使用它们，我如何使用它们：
当我调整窗口大小时自动缩放图像，当图像达到原始大小时停止缩放？
保持固定大小，直到我将窗口调整为某些小大小，然后开始自动调整大小。
浏览 3提问于2015-02-23得票数 1
如果我们为一个图像元素指定最大宽度: 100% (例如，图像250 to *500 to)，并将该图像放置在宽度为1000 to的父元素中，那么如果父元素收缩为<= 500 to，则图像将相应地缩小以占据父元素的完整长度。但是，如果父文件的宽度大于500‘t，则图像不会缩放，而是在原来的500’t。
让我困惑的是这里100%的含义。据我所知，相对百分比总是相对于其父母。所以，它不意味着最大宽度总是它的父级的当前宽度吗？因此，由于最大宽度为100%，因此图像将始终缩小/缩放以适应其父母。我在这里误解了什么？在这种情况下，如何理解最大宽度中使用的相对百分比？，它相对于什么？，谢谢！
浏览 2提问于2021-11-24得票数 1
2回答
当我调整网页的大小时，一切都变得不合适了。文本在容器下面，图像变得太宽。我怎样才能做到，当图像被调整大小时，一切都保持在原处？我看了几个解决方案，但似乎没有一个对我有用。任何帮助都将不胜感激！
body {
background-color: #ADD8E6;
padding: 10px;
margin: 0;
}
.hcontainer {
background-color: #FFFFE0;
height: 600px;
text-align: center
}
div h1, p {
padding-top: 10px;
padding-left: 10p
浏览 5提问于2022-06-05得票数 1
1回答
固定数据表宽度不调整容器
、、、
我有一个简单的固定数据表组件，基于，我在storybook上呈现它
import React, { Component } from 'react';
var FixedDataTable = require('fixed-data-table');
const {Table, Column, Cell} = FixedDataTable;
export default class IndexPage extends Component{
render() {
return (
<div cla
浏览 0提问于2017-05-27得票数 0
为什么当浏览器被调整大小时，最后一个元素会向下移动？这是我的标记。这仅仅是最后一个正在下降的元素。
<div id="bct-items-container">
<div class="bct-items">
<img src="assets/images/jobs-icon.png" alt="Jobs"/>
<h1>2,118</h1>
<p>Open Jobs</
浏览 0提问于2014-07-31得票数 0
回答已采纳
我必须根据当前字体大小设置一个View的宽度。所以我想知道React的1em是否类似于
我用PixelRatio找到了一个解决方案
import { PixelRatio } from 'react-native';
// ...
<View style={{ width: 100 * PixelRatio.getFontScale() }} />
但在我看来，这太复杂了，也太模糊了。有没有更简单、更干净的方法来解决这个问题？
谢谢。
浏览 1提问于2019-04-09得票数 0
回答已采纳
我试图让iPad和iPhone上的文本看起来一样。我使用MediaQuery使字体与iPad屏幕成比例，但是在iPhone上字体太大了。所以我使用了AutoSizeText，但现在我遇到了这个问题。
这是我的密码：
body: ListView(children: [
Center(
child: AutoSizeText('Dummy Text',
style: TextStyle(fontSize: 60 * MediaQuery.of(context).devicePixelRatio),
浏览 2提问于2021-06-04得票数 0
回答已采纳
在iOS上，你可以把一个<Picker>放在一个灵活的盒子里，让选择器在屏幕的整个宽度上伸缩。
使用React Native中新的跨平台<Picker>元素，在安卓上做这件事最简单的方法是什么？
Android上的Picker只接受width元素，显然不接受百分比值。它不会缩放到其容器的宽度。
浏览 6提问于2016-02-10得票数 3
2回答
我有以下小提琴：
#wizard li {
display: inline;
min-width:100px;
float:left;
}
第二个div宽度应根据文本宽度计算。
在IE7和IE8中，它是混乱的。
由于某种原因，'a‘元素获取span2 div的宽度，而不是文本。
编辑：
经过更多的挖掘，我注意到问题不是宽度，而是浮动。如果我没有设置宽度，浮子就不能工作。它并不限制文本的宽度。
编辑2:
无法找到任何可以工作并保持宽度自动的纯css解决方案，所以最后我使用javascript计算宽度。
浏览 3提问于2013-08-05得票数 0
回答已采纳
1回答
嗨，我正在一个app本机应用程序中实现app导航，并且我正在跟踪react导航上的docs。当我运行代码时，结果是：
我的问题是如何使中心内容的宽度与屏幕相同。另外，这也是我第一次从reactJS转换后使用reactJS本地世博会。
代码:导航代码：
import Login from "./Login";
import Signup from "./Signup";
import {
createAppContainer,
NavigationContainer,
NavigationNavigator,
} from "react-
浏览 2提问于2022-01-27得票数 0
回答已采纳
1回答
我正在使用react-native-camera包在一个反应本地移动应用程序中制作照片。
在应用程序的Reve原住民部分，我使用格式对图像进行编码，并使用来存储它们。
问题是，我如何才能在中获得有关摄像机分辨率(高度、宽度)的信息？
直接从相机，或通过访问照片的高度或宽度属性.
我试着手动指定分辨率，但react-native-camera的 captureQuality={Camera.constants.CaptureQuality["1080p"]}似乎不起作用(在安卓上测试)，相机仍然使用全分辨率。
浏览 4提问于2017-02-08得票数 1
5回答
可以通过jQuery更改div的宽度吗?如果可以，如何更改？
我想要的是根据浏览器的窗口宽度实时改变窗口的宽度，所以如果/当用户改变浏览器窗口时，div的尺寸也会实时改变。
浏览 0提问于2011-11-16得票数 21
回答已采纳
3回答
亲爱的们：
我有一个风格独特的div。但我只想让这个div根据内部文本自动调整大小，以便正确地围绕所有文本。
当我将width设置为某个百分比时，无论文本有多大，它都将是这个大小，而当文本很长时，它将越过边界。
<div style="position:relative; width: 60%; height:90%; text-align:center; border:1px solid black; display: inline-block;">
Some Text.
</div>
请帮帮我！
浏览 0提问于2017-07-11得票数 0
当lineHeight还没有定义时，我需要在React Native中获取一些文本的默认lineHeight。我认为它通常是字体大小的20%左右。有人知道React Native是如何设置其缺省行高的吗？
浏览 41提问于2019-05-08得票数 4
3回答
请看一下。
<div id="textarea_wrapper">
<textarea>How and where my width is derived from?</textarea>
</div>
#textarea_wrapper{
height: 250px;
border:thick solid green;
}
textarea{
background-color: #930;
border:none;
margin:0;
width:auto;
resize:none;
overflow:
浏览 4提问于2014-05-06得票数 2
回答已采纳
我是一个响应式网页设计的新手，正在寻找一个。
它并没有真正解释太多，但提供了一个解决方案。
如果img被设置为width: 100%，我知道它将占据浏览器窗口或其包含元素的100%。
用于设置元素最大宽度的max-width属性。
如果我将img标记设置为max-width: 100%，那么百分比是根据什么元素/上下文计算的？
我所看到的是，当使用max-width时，图像会缩小，但永远不会放大。
最大宽度示例：
宽度示例：
浏览 0提问于2016-08-08得票数 1
出于加载时间的考虑，我在Flex应用程序中使用了一个运行时css文件。
我在使用多行文本控件时遇到问题：
<mx:Text id="txtDescription" selectable="false"
styleName="imageRolloverButtonTextDark" width="100%" textAlign="center"
text="{_rolloverText}"/>
当我的CSS样式表正确加载后，文本样式会发生变化，但不会重新计算高度。它看起来只是一个单行字段。
浏览 0提问于2008-11-22得票数 0
回答已采纳
我想知道在宽度和高度<img>属性中，是否可以将宽度和高度指定为百分比？
好吧，我想这是显而易见的，因为当我尝试这样做时，它会调整大小，但它似乎会扭曲我的图像质量。
以下是具有固定属性的标记的示例：
<img src="#" width="346" height="413">
现在，在尝试缩小比例的同时，通过百分比将其缩小一半：
<img src="#" width="50%" height="50%">
我得到的东西完全不同于：
<img src="
浏览 6提问于2010-08-03得票数 70
回答已采纳
你好，伙计们，我试图通过使用百分比而不是像素来提高网站的响应能力。当我将图像宽度更改为百分比时，我注意到它也会影响高度。有人能给我解释一下为什么吗？
提前感谢！
浏览 4提问于2014-02-01得票数 0
回答已采纳
我正在尝试设置视图的背景色。我把所有东西都放在这里了：
import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class Login extends Component{
render(){
return(
<View style={styles.container}>
<Text>
浏览 2提问于2017-04-19得票数 6
我有以下html：
<body>
<h1>Something</h1>
<img id="myid" src='images/bigimage.png'/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-
浏览 0提问于2013-06-13得票数 1
回答已采纳
2回答
我有以下几点：
<div style="container;background-image:url('/images/football.jpg');background-size:100% 100%;">
我想手动调整图像的宽度和高度。我目前有覆盖整个div的宽度，但不是完整的高度。有没有办法以百分比形式手动调整大小，同时保持图像无重复。
浏览 2提问于2015-10-08得票数 0
我想在react-native上做这样的事情
<View
style = { width: '100%', padding: 10, borderRadius: '25%' }>
{...}
</View>
但我(在iOS上)
NSString类型的JSON值“25%”不能转换为NSNumber
是否有方法使用相对/百分比值作为borderRadius的样式输入
浏览 3提问于2021-03-11得票数 2
回答已采纳
在模拟器上，文本看起来没问题，但在我的手机上，它太大了。
<label text="just some regular text" class="text"> </label>
.text{
font-size: 20%;
}
浏览 4提问于2020-01-08得票数 3
2回答
所以我需要链接react-native-svg 我采取的步骤是： $ npm i --save react-native-svg
$ react-native link react-native-svg
//react-native: command not found
then I did
$ npm install -g react-native-cli
and again
$ react-native link react-native-svg
// no output this time 现在我想使用文本与SVG i导入import { Svg, G, Line, Rect,
浏览 24提问于2020-12-29得票数 0
回答已采纳
1回答
我已经创建了一个标题，我试图使它的宽度100%的屏幕，但当我缩小屏幕大小，它不适合屏幕(缩小宽度)。这是我的css
<Box
style={{
backgroundColor: "RGB(46, 180, 195)",
height: "60px",
padding: "12px",
width:"100vw",
position: "sticky",
top: 0,
浏览 2提问于2022-01-06得票数 0
回答已采纳
我有一个图像，它位于一个居中的文本区内：
<div style="max-width: 64rem; margin-left: auto; margin-right: auto;">
<p>Some text</p>
<img style="width: 100%;" src="myimage.png">
<p>Some more text</p>
</div>
我想有一个很好的艺术效果，在图像的中心，但弹出在双方的文本的父分区3雷姆左右。
我很想用r
浏览 2提问于2020-07-16得票数 0
回答已采纳
我试图在网页上放置一个静态图像(这是一个文本的图片，希望保持此文档的完整性)，并将动画覆盖在图像的顶部，例如一个框，它将悬停在文本块上(从静态图像中)，并在文本块中提供额外的上下文。我已经使用悬停的CSS，但正在寻找其他解决方案，因为当我放大页面的方块上的文字不对齐彼此。提前谢谢你。
浏览 1提问于2017-09-16得票数 0
回答已采纳
我认为这是一个浏览器错误，但在Chrome和Firefox当前版本的测试(在Windows上)中，这种行为是相同的。
为什么长的，包装的文本导致列分布被调整？即使在包装之后，随着包装文本的长度越来越长，它也会继续调整。您可以通过固定的选择或交互大小的textarea来看到它( textarea行为的期望稍微高一些，只是为了便于演示--我不太关心textarea是否正常工作)。
浏览 3提问于2020-11-13得票数 1
回答已采纳
1回答
无法用编译本机项目
、、、、
我一直在使用react本机，并在遵循说明之后添加了调整sdk，无法在android端编译该项目。我遇到的问题是关于build.gradle中的这一行
compile 'com.google.android.gms:play-services-analytics:10.0.1'
如果该行不在其中，那么它编译没有问题，但是在那里，它不能处理这个错误(上下文的前几行)：
:app:transformClassesWithDexForRelease
Running dex as a separate process.
To run dex in process, the Gradl
浏览 1提问于2017-06-22得票数 1
我使用cytoscape.js来可视化来自Neo4j的图形数据。我特别感兴趣的关系之一是父母和孩子的关系，cytoscape.js使这种关系在很大程度上成为了一件轻而易举的事情。
但是，当父节点只包含一个子节点时，该子节点放置在父节点的标签上，因此如果不选择其子节点并将标签写入页面上的其他地方，就不可能读取。
有什么办法可以解决这个问题吗?例如，改变父母的最小尺寸的方法？
编辑:找到了‘节点文本-对齐:顶部’，它将文本放在节点的外部和顶部，从而解决了查看标签的问题。仍然感兴趣的是，如果改变大小是可能的。
浏览 6提问于2020-04-28得票数 1
有人能告诉我如何改变我的反应引导按钮的宽度吗？
我只是在玩它
我已经从react引导导入了Button组件，我已经添加了该组件
import {Button, ButtonGroup } from 'react-bootstrap';
按钮的最大宽度似乎是100。例如，如何将按钮的宽度增加到200？
<Button
class="btn btn-outline-primary mr-xl-5 w-100"
...
>{ctrl.label}</Button>
浏览 1提问于2019-05-24得票数 4
1回答
表中列的实际宽度是如何确定的？下面的代码(在Chrome中)如下所示：
我的问题是用"ddd...“向单元格添加更多的字符。空闲空间不会被使用，但其他单元格的内容会被包装。有时候问题是短信"aaa...“和"ccc...“不会重叠。表的总大小是固定的，但所有内容都是动态的，因此不推荐使用固定的布局。
更新:尽管第一行(c1-c4)包含的文本比实际列中的任何一列都少，但它对最终布局有相当大的(积极)影响。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>&
浏览 0提问于2013-06-17得票数 25
回答已采纳
1回答
我使用react-native-perspective image -cropper包动态地裁剪图像，它的效果非常好。但有时，当裁剪区域覆盖在图像之外时，我尝试裁剪图像，然后添加白色背景来替换图像区域的外部。 在Android中，它没有添加任何白色背景，但在IOS中，我遇到了这个问题。 ? ?
浏览 32提问于2020-11-27得票数 0
1回答
我刚刚使用expo init在Expo上创建了一个React Native应用程序。一切都很顺利。然后我继续创建了一个主屏幕，如下所示：
import React from 'react';
import { View, TextInput } from 'react-native';
export default class HomeScreen extends React.Component {
state = {
searchText: ""
}
render() {
retur
浏览 0提问于2020-06-15得票数 0
1回答
下面的函数在iOS上工作，但在Android上不起作用。我想在这两个平台上取得相同的结果。
基于，原因是安卓react-native包中缺少了ImageStore。
import {
ImageEditor,
ImageStore
} from 'react-native';
在安卓系统中，在react-native中裁剪图片(以正方形)的替代方法是什么？
cropImage(base64ImageData) {
return new Promise((resolve, reject)=>{
ImageStore.addImageFromBas
浏览 3提问于2017-02-06得票数 4
我正在学习react- native，我试图给文本增加一些不透明性，我想知道这在react native中是否可能。在react-native中是否有针对文本颜色的RGBA。谢谢
浏览 30提问于2020-05-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
