如何使用react native的首选项/UI设置TextInput的样式
React Native是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript编写代码，并将其转换为原生组件，以在iOS和Android设备上运行。在React Native中，可以使用TextInput组件来创建文本输入框，并通过设置样式来自定义其外观。
要设置TextInput的样式，可以使用内联样式或外部样式表。以下是一些常见的样式属性和用法：
- 设置文本颜色：<TextInput style={{ color: 'red' }} />
- 设置字体大小：<TextInput style={{ fontSize: 16 }} />
- 设置字体样式（粗体、斜体等）：<TextInput style={{ fontWeight: 'bold', fontStyle: 'italic' }} />
- 设置文本对齐方式：<TextInput style={{ textAlign: 'center' }} />
- 设置边框样式：<TextInput style={{ borderWidth: 1, borderColor: 'gray' }} />
- 设置背景颜色：<TextInput style={{ backgroundColor: 'lightgray' }} />
- 设置占位符文本样式：<TextInput placeholder="Enter text" placeholderTextColor="gray" />
- 设置输入框高度：<TextInput style={{ height: 40 }} />
- 设置键盘类型：<TextInput keyboardType="numeric" />
- 设置最大输入长度：<TextInput maxLength={10} />
这些只是一些常见的样式属性和用法示例，你可以根据需要进行更多的自定义。React Native还提供了许多其他属性和事件，以满足不同的需求。
关于腾讯云的相关产品和产品介绍链接地址，可以参考腾讯云官方文档或官方网站。
相关·内容
3回答
如何在JSS中指定:焦点属性？
、、、、
我将react-native-web与expo和react-native-paper (material ui)一起使用
我的问题是在编译的web版本中的焦点轮廓属性上的文本区域，所以我需要去掉这个蓝色边框。通常我会这样做
textarea:focus {
outline:none!important
}
对于react-native，我们不能只使用jss而使用css，但是如何使用这个属性呢？
<TextInput
label='Email'
value={this.state.text}
onChangeText={text => thi
浏览 0提问于2019-09-01得票数 1
我想构建一个组件，它接受一个Icon参数，并将所有其他参数传递给一个样式化组件Input (基于TextInput)。在Javascript中，这很简单： import React from 'react';
import { TextInput } from 'react-native';
import styled from 'styled-components/native';
const Input = styled.TextInput`
color: #268596;
`;
export default ({ Icon, ..
浏览 18提问于2021-05-07得票数 0
回答已采纳
1回答
我使用的是@shoutem/ui库，它有自己的TextInput实现来响应本机。
我正试图将焦点放在键盘上的下一个输入上，按下一个按钮，如下所示
但是，Shoutem/ui的实现并不公开我可以从引用中使用的TextInput的focus()方法。
如何将TextInput的focus方法公开为外部类中的属性？
import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';
import { connectStyle } fr
浏览 0提问于2017-01-14得票数 0
回答已采纳
尝试在带有深色键盘主题的TextInput上设置keyboardType，如何在React Native中执行此操作？
浏览 1提问于2015-05-13得票数 13
我正试图实现如下所示的样式
看看这里指纹图标是如何碰巧在Textinput字段的边框内的，但是我得到的输出如下所示
PS:-忽略左侧和右侧的黑色边框，它恰好是模拟器的主体，只关注UI。
这是我的密码:-
import { View, Text, TextInput, StyleSheet } from 'react-native'
import React from 'react'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
cons
浏览 3提问于2022-11-28得票数 0
1回答
虽然我在反应方面有经验，但我对react-native非常陌生。我已经尝试了几个答案张贴在这样的相同的问题，但他们都没有帮助我解决问题。
我有Account和App组件调用帐户组件。Account组件呈现输入字段，但是输入字段不显示在UI中，但是如果我只在Account中添加文本(如<Text>Hello</Text> )，它将显示在UI中，但我的自定义帐户组件没有显示在UI中。我不知道我做错了什么。
PFB组件详细信息
App.js
import React, { Component } from 'react';
import { StyleShee
浏览 0提问于2018-10-07得票数 2
回答已采纳
我对本机开发的反应是新的。在我的应用程序中，我有登录页面，在这个登录页面中有两个文本输入。在这个文本中，输入没有加下划线。我已经尝试了很多方法，但没有得到下划线。这里我的要求是需要对inputtext加下划线。那么，如何得到这条下划线呢？
这是我的登录表单代码。
import React, {Component} from 'react';
import {StyleSheet, Text, View,TextInput,TouchableOpacity} from 'react-native';
export default class App extend
浏览 0提问于2018-09-27得票数 8
我用的是“反应-原生-纸”："^4.12.5“和”反应-原生“："0.70.4”
我想用反应纸把左边的布局转换成右边的布局。但我发现了一个问题。我不知道如何将输入和TextInput的占位符对齐。我也想隐藏光标。
我尝试过使用纸张组件的样式支柱注入"textAlign“，但是它似乎不起作用，而本地的纸道具不允许这种转换。你知道我怎样才能改造纸张组件吗?还是你认为我必须自己设计？
import * as React from 'react';
import {StyleSheet} from 'react-native';
imp
浏览 13提问于2022-11-10得票数 1
回答已采纳
当键盘关闭时，Scrollview工作正常。但当键盘打开时，它不会滚动到底部。不过，它在Android上运行得很好。问题只与iOS有关。 如果我使用react-native-keyboard-aware-scroll-view，那么问题就解决了，但是我不想使用这个包。 我的工作环境： 世博会sdk :- 40 平台:- IOS import React from "react";
import {
ScrollView,
TextInput,
SafeAreaView,
TouchableOpacity,
Text,
} from "react-n
浏览 45提问于2021-02-01得票数 5
我正在学习Android移动应用程序的。我正在制作一个屏幕，我需要设置button.的高度，我在view中添加了button并设置了使用样式的高度，但是按钮高度没有变化。
/**
* LoginComponent of Myntra
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import { AppRegistry, Text, View, Button, TextInput } from "react-nati
浏览 6提问于2017-01-21得票数 21
回答已采纳
5回答
我有以下代码：
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: '',
};
render() {
return (
浏览 2提问于2019-02-25得票数 3
回答已采纳
有没有办法在React Native中将fontStyle: 'italic' only设置为placeholder of TextInput？
看起来你只能设置一个占位符和placeholderTextColor的。
浏览 493提问于2016-02-23得票数 64
回答已采纳
它只发生在ios中，我附加了imag，您可以看到行为(autoCorrect for ios)
TextInput风格：
textInput: {
flex: 1,
alignSelf: 'center',
fontSize: 16,
lineHeight: 24,
writingDirection: 'rtl',
top: 8,
textAlign: "right",
},
i尝试了rtl和ltr -右和左文本样式的所有组合，所以我认为与文本样式不一样。
我在项目中附加了pack
浏览 1提问于2019-10-13得票数 1
我已经删除了以下呈现结果：
return (
<View style={{backgroundColor:'red'}}>
<TextInput value={'Hello'}/>
</View>
);
生成的TextInput在iOS中是不可见的，除非我指定了高度，并且当在容器中使用柔性方向：‘行’时，我也需要指定它的宽度。
这只发生在iOS上，Android似乎像预期的那样工作。
有没有一种在没有固定大小的情况下在TextInput中显示iOS的方法？
当前依赖关系：
"dependencies
浏览 3提问于2016-01-29得票数 22
回答已采纳
我新的反应-本机，并希望显示项目内的容器垂直。但出于某些原因，我无法在安卓系统上看到TextInput。首先，我没有在iOS上看到它，但是通过将position: "absolute"添加到TextInput中，我能够在iOS上看到它，安卓仍然失踪。我不知道为什么。(我使用的是wix/react本机-ui-lib)
import React from "react";
import { View, TextInput, Text, Button, Image } from "react-native-ui-lib";
class Ma
浏览 0提问于2018-03-05得票数 1
回答已采纳
我一直试图给<TextInput>一个letterSpacing风格，但它似乎只适用于<Text>。在React Native中有没有办法增加TextInput中字符之间的间距？
这增加了字符之间的间距
<Text style={{'letterSpacing': 5}}>Some Text</Text>
这不管用
<TextInput style={{'letterSpacing': 5}} />
浏览 1提问于2016-06-28得票数 10
当文本聚焦时，总是会有一个蓝色边框。我已经设置了样式borderWidth: 0，但是仍然有一个边框。我也试过设置边框颜色，但也不起作用。
有什么提示吗？
没什么特别的，我从expo tab样板开始。我还发现自动对焦也不能触发:(
import * as React from "react";
import { StyleSheet } from "react-native";
import { TextInput } from "react-native-gesture-handler";
import EditScreenInfo from
浏览 31提问于2021-05-23得票数 0
回答已采纳
我还是个新手，在学习教程后才开始原生反应。我注意到android和iOS之间的按钮不一致，所以我想我应该试试react-native-paper库。
然而，从react-native-paper导入按钮后，我在更改按钮的颜色时遇到了问题。颜色是一个恒定的颜色，就像在提供的图像中一样
我该如何操作颜色呢？另外，有没有更好的库来保证android和iOS之间的按钮一致性？
谢谢
代码如下：
// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } fro
浏览 17提问于2019-10-31得票数 1
回答已采纳
我的react本机应用程序下面的代码需要显示一个简单的背景图像，我在下面的代码中使用它(我使用css和js)，当我运行该代码时，我得到以下错误，它告诉我没有定义宽度参数，尽管我是如何解决这个问题的？
错误宽度本机反应：
:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/react-native/Libraries/ReactNative/renderAppli
浏览 8提问于2021-12-07得票数 0
我只有一行TextInput，可以通过UI的其他部分进行更新。 我的问题是，有时文本可能会很长。在本例中，当我更新value时，TextInput会一直滚动到其内容的末尾。我需要TextInput保持与左侧挂钩时，它是更新。 有什么方法可以让我这样做吗？ Expo SDK 37，React Native 0.61，React 16.9
浏览 12提问于2020-06-25得票数 2
回答已采纳
我正在尝试制作一个具有两个TextInput的组件：
街道数
街道名称
我希望第一个有35的宽度，第二个横向填充剩余的空间。
你会怎么做？
我的代码：
import React from 'react';
import {StyleSheet, View} from 'react-native';
import FormInput from "./FormInput"
export default class NoStreetInput extends React.Component {
render() {
浏览 1提问于2018-11-24得票数 0
回答已采纳
我的React-Native应用程序中有TextInput字段，如果不将行高设置为非常大的值，就无法让字段中的文本不滚动和截断文本的底部。 以下是正在发生的事情的图像： ? 样式道具如下： input: {
height: 28,
paddingBottom: 0,
fontSize: 18,
color: '#000',
borderBottomWidth: 1.5,
}, 有没有一种方法可以强制文本不在TextInput中移动
浏览 104提问于2019-03-15得票数 4
回答已采纳
我试图在ios UITest中编辑TextInput React本机组件的文本。我已经将testID支柱添加到组件中。
两个问题：
testID支柱在本机ios代码中出现在哪里？
如何通过此TextInput选择testID并向其添加文本？
App.js
import React from "react";
import { StyleSheet, TextInput, View } from "react-native";
export default function App() {
return (
<View>
浏览 4提问于2020-05-01得票数 3
回答已采纳
代码：
import React, { Component } from 'react'
import {
View,
Text,
TextInput
} from 'react-native'
export default class Home extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Home'
}
}
render () {
const [val
浏览 14提问于2019-11-21得票数 0
回答已采纳
? 当文本溢出时，有没有办法覆盖在TextInput末尾放置省略号的iOS默认行为？我希望能够看到的是文本被截断之前的最后一个字符。 你可以用任何TextInput重现它。下面是一些示例代码： import React, { Component } from 'react';
import { TextInput } from 'react-native';
export default function UselessTextInput() {
const [value, onChangeText] = React.useState(&#
浏览 53提问于2019-09-20得票数 0
2回答
我正在创建一个包含两个简单组件的地图应用程序:使用的搜索栏和使用的映射。到目前为止，只有UI已经实现。
当只放置搜索栏时，一切正常。我可以键入我的搜索查询，当我单击该栏时键盘会弹出：
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, View, Dimensions, Permission
浏览 0提问于2022-03-14得票数 0
因此，我试图创建一个OTP身份验证流程。我在phoneInput屏幕上输入，然后移到OTP验证屏幕。在OTPvercification上，我的textInput无法工作。
App.js
import * as React from 'react'
import { Button, View, Text } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from &#
浏览 2提问于2021-02-11得票数 1
我正在尝试制作一个类似于react本地聊天服务的应用程序。我有3个文件:fpLogin(登录页面)、chatsScreen (您可以看到所有活动聊天的屏幕)、chatsComponent (我将chatsScreen中的聊天传递为chatsComponent，因为这在我看来更有效)
这仍然是一项正在进行的工作，但我一直坚持这个错误：“无法读取未定义的属性(读取‘宽度’)。
如果有人能帮我的忙，我会很感激的，因为我被困在这里三天了.
fpLogin
import React, { useState } from "react";
import {
Text,
View,
浏览 1提问于2022-05-01得票数 1
2回答
如何更改TextInput元素内的文本输入颜色，以响应本机元素，我尝试将color="red"传递给组件，但由于某种原因，它无法工作。
下面是我使用的代码：
import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button, Input } from "react-native-elements";
import Icon from "react-native-vec
浏览 1提问于2020-05-20得票数 1
回答已采纳
我是第一次使用React Native。在我的简单测试应用程序中，我想尝试使用react-native-elements
但是，我不能让我的按钮背景颜色显示。
我遵循文档并尝试添加一个按钮，如下所示：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { Button } from 'react-native-elements';
export default class loginForm extends C
浏览 0提问于2019-02-19得票数 11
回答已采纳
我想知道我如何使用键盘与反应本机。
当我点击我的输入(在“发送”)，我没有一个键盘显示。
我试着使用"KeyboardAvoidingView“，但键盘没有显示。
ChatScreen.js
import React from 'react';
import { ScrollView, KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
import MessageList from './MessageList';
import Mes
浏览 0提问于2019-08-06得票数 0
回答已采纳
我想问你--有谁知道如何摆脱iOS辅助功能检查器中的“动态文本字体大小不受支持”的警告？
我有一个React Native应用程序，我已经通过覆盖文本和TextInput的defaultProps (allowFontScalling: false)全局禁用了字体缩放，但我在iOS模拟器上使用的辅助功能检查器中仍然收到“动态文本字体大小不受支持”的警告。
如何摆脱这些针对TextInputs收到的警告？我可以确认在重写之后字体不再是可伸缩的。
浏览 3提问于2021-09-29得票数 0
我想在react-native中为我的TextInput的输入创建一个虚线边框。像这样的
到目前为止，这是我的代码：
<TextInput maxLength={5} keyboardType={'numeric'} style={styles.numBox}></TextInput>
和stylesheetz：
numBox: {
display: 'flex',
width: 270,
height: 58,
marginLeft: 'auto',
marginRight:
浏览 4提问于2019-11-03得票数 1
回答已采纳
早上好，我用react-native尝试了一个简单的组件，它改变了我的按钮的颜色，而onFocus().I找不到如何改变颜色。这是我的组件。你有什么想法吗？ import React, {Component} from 'react';
import {
StyleSheet,Text, View, Button,
} from 'react-native';
export default class App extends Component {
render() {
r
浏览 45提问于2018-12-19得票数 0
回答已采纳
3回答
如何改变按钮的颜色和按钮文本按钮在反应本机？我没有给我的发送按钮添加任何颜色，但是它的颜色仍然是蓝色的，我希望蓝色变成白色，发送文本的颜色变成蓝色，我怎么能做到呢？
我的代码
import React, { useState } from 'react';
import { Text, View, StyleSheet, SafeAreaView, TextInput, Button } from 'react-native';
import socketServices from './src/utils/socketService';
浏览 2提问于2022-08-14得票数 0
回答已采纳
1回答
我想在React Native中使用情感。我能够让它在styled-components上工作，但不能在emotion上工作。我也在使用styled-system来设置我的UI系统。
我正在设置一个样式系统，如下所示：
import React from 'react';
import * as N from 'react-native';
// import styled from 'styled-components';
import styled from '@emotion/native';
import {
co
浏览 4提问于2019-10-25得票数 0
我已经在react-native中创建了一个应用程序，并且我有一个在消息中聊天的选项。当我在TextInput内部单击并键入两行时，上面一行隐藏起来。为了解决这个问题，我在docs的属性中看到了这个问题，但它不起作用。
下面是我的代码：
<TextInput
ref='textInput'
multiline={true}
numberOfLines: {5}
onChangeText={this.onChangeText}
浏览 0提问于2016-03-11得票数 8
2回答
不久前，我开始在中编码，我偶然发现了这个问题，我已经坚持了三天了。我的文件永远编译。信息是“编译.”永远不会结束，而且当它编译时，我100%的内存被使用，所以我假设它是一个无限循环，因为代码很小，所以我不知道还有什么会导致我的计算机如此努力地工作。总之，这是我的代码：
App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from './Registration/Reg
浏览 3提问于2020-07-16得票数 0
回答已采纳
2回答
我正在创建聊天UI，在react本机中，我希望第一部分(其中显示消息)应该是可滚动的。
TextInput应该在屏幕底部，键盘应该在它后面。
UI类似于WhatsApp聊天屏幕。但我不能重新创建那个UI。
我也尝试过来自react-native的react-native，但它不像它那样对我起作用。
App.js
import React, { useEffect, useState } from "react";
import {
ScrollView,
View,
Text,
Alert,
Dimensions,
Platform,
Keyboar
浏览 0提问于2020-05-26得票数 1
回答已采纳
5回答
我将react-native与react-native-paper结合使用。
我有以下代码：
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: ''
浏览 1提问于2019-02-25得票数 2
回答已采纳
我的React Native应用程序中有TextInput组件，当我为密码输入添加secureEntryText: 'true'时，我注意到了两件事：
1)当我键入密码时，键入的密码的左边移到输入框的左侧，如下所示：
2)当我取消对密码输入的关注时，无论密码有多长，键入的密码末尾都会有一个省略号，如下所示：
有谁知道我如何解决这两个问题？
浏览 7提问于2020-05-19得票数 4
我有一个自定义的多行TextInput，它会自动增长/扩展以适应其内容：
import React, { useState } from 'react'
import { TextInput } from 'react-native'
export function MyInput() {
const [value, setValue] = useState('Sample')
const [height, setHeight] = useState(56)
ret
浏览 0提问于2021-02-27得票数 1
我正在使用制作简单的待办应用程序，只需观看YouTube。差异视频和我是我的版本是最新的RN，并模拟应用程序在Android。
代码看起来是一样的，但我的TextInput宽度不是100%，而是很小的元素，如您所见。
我的代码在下面，如何修复它？
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
} from 'react-native';
export default class Main exten
浏览 3提问于2017-02-28得票数 2
回答已采纳
2回答
我想在react native中创建具有材料输入文本的表单。与此处所示的相同
以下是我的代码
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-
native";
export default class App extends Component<Props> {
render() {
return
浏览 6提问于2018-12-03得票数 0
我试图清除用户的价值从TextInput时，用户点击按钮，但不能得到它。
我正在实现这个演示使用钩子在反应-本机。
所以请帮帮我，我是新来的，有反应的，谢谢你的进步。
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { RFValue } from 'react-native-responsive-fo
浏览 2提问于2021-03-09得票数 1
回答已采纳
环境
反应-原生："0.61.5"，
“样式-组件”："4.4.1“
繁殖
小吃例子：
import * as React from 'react';
import styled from 'styled-components'
import {View} from 'react-native'
export default () => {
const [text, setText] = React.useState('');
const StyledInput = styled.Text
浏览 5提问于2019-12-13得票数 2
回答已采纳
如何通过单击按钮在React Native中添加文本输入？例如，我会按下"+“按钮，它会在视图的底部添加一个文本输入。
编辑:这是我的代码(删除了所有不相关的东西)。因为某些原因不能工作。单击该按钮不会执行任何操作。
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button,
TouchableHighlight, TouchableOpacity, S
浏览 0提问于2017-07-31得票数 1
我有一个登录表单，上面有两个垂直堆叠的文本输入，还有一个容器视图，输入下面有两个按钮：
我希望这两个按钮拉伸以填充按钮容器的宽度(红色)，这样每个按钮将占据其大小的一半。然而，我不能让它工作。我尝试过flex*属性的各种组合，但都没有成功。
在原生iOS中，我会使用UIStackView = horizontal来实现此目的。React Native文档指出，使用flexbox几乎可以实现任何布局。
下面是我的组件现在的样子：
import React, {Component} from 'react';
import {KeyboardAvoidingView, T
浏览 2提问于2017-03-03得票数 2
回答已采纳
嗨，我有这样的TextInput ? 现在，当我在TextInput中输入文本，当我单击cancel时，它正在清除TextInput中的文本，现在，我想在单击is时隐藏Cancel。 以下是我的代码 import React, { Component } from 'react';
import {
Dimensions,
View,
Animated,
TextInput,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import colo
浏览 27提问于2019-02-26得票数 0
我正尝试在react-native(安卓)中渲染一个文本输入，在它下面有一条线，这是从borderBottomWidth属性put中得到的，当我输入的时候，出现了两行，看起来不太好，无法删除它，我尝试使用underlineColorAndroid='transparent'，但没有起作用
import * as React from 'react';
import { Text, View, StyleSheet,TextInput } from 'react-native';
import Constants from 'expo-co
浏览 0提问于2019-09-01得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
