如何在React Native中将按钮放在FormInput的右侧？
在React Native中将按钮放在FormInput的右侧，可以通过以下步骤实现：
- 导入所需的组件和样式：import React from 'react'; import { View, TextInput, TouchableOpacity, Text } from 'react-native'; import { Icon } from 'react-native-elements';
- 创建一个自定义组件，例如
CustomInput：const CustomInput = ({ placeholder, onChangeText, value }) => { return ( <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder={placeholder} onChangeText={onChangeText} value={value} /> <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>按钮</Text> </TouchableOpacity> </View> ); }; - 定义组件的样式：const styles = StyleSheet.create({ inputContainer: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: 'gray', borderRadius: 5, paddingHorizontal: 10, }, input: { flex: 1, height: 40, }, button: { backgroundColor: 'blue', paddingVertical: 10, paddingHorizontal: 15, borderRadius: 5, marginLeft: 10, }, buttonText: { color: 'white', fontWeight: 'bold', }, });
- 在使用的地方，使用
CustomInput组件并传入相应的属性：const App = () => { const [text, setText] = React.useState(''); const handleInputChange = (value) => { setText(value); }; return ( <View style={styles.container}> <CustomInput placeholder="输入内容" onChangeText={handleInputChange} value={text} /> </View> ); };
这样就可以将按钮放在FormInput的右侧。你可以根据需要自定义按钮的样式和功能。
相关·内容
我并没有在react-native上做过很多工作，但是formik和react-native-element在我的设置中并没有取得任何进展。我真的不确定我到底错过了什么。基本上，表单是不能提交的。我有一个可重用的按钮和由react原生元素组成的输入组件。表单不会被提交。出于好奇，我也尝试了RN的默认按钮来提交表单，但同样不起作用。我的沙箱是here。 我的设置非常简单，你可以在下面看到。任何帮助都会对我所缺少的东西有很大的帮助： FormInput.js： import React, { Component } from "react";
import { View, Sty
浏览 17提问于2019-12-08得票数 1
2回答
我正在使用redux-form在React原住民中，以及React原住民元素来创建表单。问题是，在呈现屏幕之后，用户甚至还没有接触到输入字段，就会调用验证，从而过早地显示输入验证错误。
我的代码：
FormInput：
import React from 'react'
import { Input } from "react-native-elements";
export default FormInput = (props) => {
const { input, meta: { error }, ...inputProps } = pro
浏览 0提问于2019-02-10得票数 0
我有一个问题，我想在输入栏中输入，然后点击按钮来设置AsyncStorage。但实际上我在这段代码中得到的是这样的。
当我输入的时候，AsyncStore正在设置项目，状态也被设置。如何让它不是在我打字的时候设置，而是在我点击按钮的时候设置？
import React, { Component } from "react";
import { Text, View, TextInput, Button, StyleSheet } from "react-native";
import { AsyncStorage } from "react-native
浏览 0提问于2018-12-13得票数 1
2回答
我已经为一个带有react-native元素的表单创建了一个简单的弹出窗口。问题是，第二个表单输入应该是多行的，如果文本行太多，元素就会溢出到弹出窗口的底部之外，从而将提交按钮从屏幕上推走。一个额外的好处是让提交按钮将自己定位在弹出窗口的底部。以下是代码，我还将其嵌入到一个零食中，以简化
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {
浏览 3提问于2018-08-23得票数 0
回答已采纳
我是React Native的新程序员，我的代码遇到了这个问题，我正在尝试做一个闪屏，之后我想做一个将我重定向到另一个屏幕的登录。 启动画面运行良好，但当我在登录画面中按下"Entrar“按钮时，它崩溃并显示消息。 ` import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, SplashScreen } from 'expo';
import Splash from './screens/Splas
浏览 11提问于2018-12-24得票数 0
2回答
似乎不允许我从react本机元素导入FormInput。
我发现了一个错误：
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up
浏览 0提问于2019-02-19得票数 0
回答已采纳
我是一个新的React-Native程序员。我正在尝试创建一个登录页面，但我不确定如何将一些参数传递给位于不同文件中的处理程序函数。
我尝试在onClick()按钮期间将SignIn.js中的变量电子邮件和密码传递给Auth.js中的onVerify
SignIn.js
import React from "react";
import { View } from "react-native";
import { Card, Button, FormLabel, FormInput } from "react-native-elements";
浏览 0提问于2018-05-13得票数 0
4回答
我一直与YouTube教程一起编写代码，并遇到了这条错误消息。我已经安装了正确的import语句和适当的依赖项，所以我不确定问题是什么。
模拟器中的iOS错误消息：
，我在其中调用Anticon的组件：
import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {windowHeight, windowWidth} from '../utils/Dimensions';
import AntDesign from
浏览 8提问于2021-09-22得票数 1
回答已采纳
1回答
我正在用reactjs做这样的事情，但是当我开始学习react-native时，它不工作，你能告诉我如何执行这样的任务吗？？
import React, {Component} from 'react';
import {Text, View, Form } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage, Button } from 'react-native-elements';
class Header extends Component
浏览 2提问于2018-10-05得票数 3
我们怎样才能得到一个圆形的按钮。当前，该按钮从左向右伸展。我不想使用位置绝对，因为我有其他项目，在这个工厂的按钮 import { FAB } from 'react-native-paper';
const MyComponent = () => (
<FAB
style={styles.fab}
small
icon="plus"
onPress={() => console.log('Pressed')}
/>
);
const styles = StyleSheet.c
浏览 18提问于2021-10-02得票数 0
我一直试图实现Redux到一个反应-本机注册应用程序，我正在努力创建一个多页表单设置。
为此，我需要同一个按钮来执行两项功能：
导航和状态处理。
我在这方面一直有问题，因为我一直收到一个错误，告诉我所讨论的组件没有附加任何方法。
与这一问题有关的代码可在以下文件中看到：
import React from 'react';
import ReactNative from 'react-native';
import { AppRegistry,TextInput,View,StyleSheet} from 'react-native';
im
浏览 2提问于2017-09-17得票数 0
回答已采纳
我正在尝试制作一个具有两个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
回答已采纳
2回答
刚刚创建了我的第一个react本机应用程序，并使用以下方法添加了我的第一个库“react-原生-元素”
yarn add react-native-elements
该包出现在我的node_modules文件夹和yarn.lock中，但是我收到以下错误：
Cannot find module 'react-native-elements'
app.tsx
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button
浏览 0提问于2020-06-05得票数 2
回答已采纳
1回答
一个通用的代码组织问题，因为我是新的反应本机和反应导航。
如何组织代码？
目前，我的所有工作代码(不包括模块和依赖项)都在一个文件(app.js)中。我无法想象这是正确的方法。，我怎么把这段代码分开？
页面在组件文件夹中的自己的文件中应该是不同的吗？
如果是这样的话，我会export它们，然后将它们放到这个文件中吗？
不知道该怎么做。app.js文件代码在下面，我的整个代码库位于：
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
im
浏览 3提问于2017-12-16得票数 1
我正在使用TextInput，但无法设置它的宽度，有人能帮我设计一个右边有按钮的FormInput吗？如果它结合在一起，那就更好了
iam使用
<View style={{ flexDirection: "row"}}>
<Ionicons.Button name="md-arrow-round-back" backgroundColor="#FFF" color="#00AEEB" size={25} onPress={()=>this.props.navigation.n
浏览 11提问于2018-08-06得票数 0
回答已采纳
我使用的是示例here，但它抛出了Invariant Violation: element Type is invalid: expected a string错误页面。 按钮组件工作正常，但不知何故形成组件导致了此问题， 有没有人以前用过react-native-elements的表单组件，并知道如何修复它？ 代码如下： import React, { Component } from 'react';
import { View, Text,StyleSheet } from 'react-native';
import Icon from 're
浏览 16提问于2019-01-06得票数 0
回答已采纳
我无法删除"PRACTICIA“标志图像周围的空白区域，因此我的按钮被按到底部。有没有人能帮我一下？我的代码是
我的截图在底部。这是整个应用程序的代码，它在app.js文件中。
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { StackNavigator } from 'react-navigation';
import {
Button,
FormLabel,
FormInput
浏览 3提问于2017-12-19得票数 2
1回答
我把这个模型输入到react native中，命名为LoginView.js
"use strict";
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginVie
浏览 3提问于2016-11-20得票数 0
回答已采纳
我正在尝试通过react native和typescript来使用KeyboardAvoidingView。 不幸的是，即使添加了TouchableOpacity，它仍然不能工作。 这是我的LoginScreen import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
Image,
Text,
Alert,
Keyboard,
TouchableWithoutFeedback,
KeyboardAvoidingView,
Platform,
} from &
浏览 62提问于2021-10-12得票数 0
我正在从React本机组件进行异步API调用。我想展示我的活动旋转，直到我得到回复。不推荐使用setProps()函数。我知道，在呈现AddressForm.js父元素时，我可以从它那里传递一个支持项。但是，在得到停止旋转器的响应后，如何更改父元素的状态--这里是我的代码：
地址表格：
import React from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import {
FormLabel,
FormInput,
Button,
} from
浏览 0提问于2018-11-24得票数 0
回答已采纳
我制作了下面的屏幕，其中每个标签+输入组合都在一个子组件中。当我单击save (salvar)时，我想检查每个组件的ref，看看它是否有一个"isInvalid“变量设置为真，然后将边框涂成红色并显示一条错误消息。这意味着该字段是必需的，等等。
我尝试过在父组件中创建一个ref，如下所示：
export default function DiaryExam({ navigation }) {
let examNameRef = useRef();
return (
<Page type="static" title={'Avalia
浏览 79提问于2021-03-10得票数 0
回答已采纳
1回答
我已经在原生react中创建了用户表单，我想使用mongodb来存储数据。我已经在我的mongodb.js中建立了mongodb连接，但我在连接到我的注册页面时遇到了问题。我不想去快递，因为我的项目很小。
下面是mongodb.js：
var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mytest";
MongoClient.connect(url, function(err, db) {
if (err) throw err;
浏览 11提问于2017-08-28得票数 1
当我试图将redux表单包装到react本机元素中时，它会显示以下错误。
这是我的密码
import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
const renderField=({label,keyboard
浏览 0提问于2018-04-11得票数 1
回答已采纳
我正在制作一个LoginScreen，但当我尝试放置表单元素时，它会启动我的错误。
代码如下：
import React, { Fragment, Component } from 'react';
import { StyleSheet, Image, StatusBar, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements'
import normalize fr
浏览 0提问于2019-10-09得票数 0
1回答
我一直在使用气泡库，我想在“回复”.How右边的气泡旁边添加一个按钮，我可以这样做吗？ Example Image Bubble.JS import React from 'react';
import {Bubble} from 'react-native-gifted-chat';
export const renderBubble = props => {
return (
<Bubble
{...props}
wrapperStyle={{
left: {
backg
浏览 17提问于2021-09-15得票数 1
我能知道为什么我的键盘在文本输入字段中输入的每一个字符都会自动关闭吗？我对字符输入做了状态更改，但是为什么它取消了键盘，我看不出代码有任何问题。我在android模拟器上遇到了这个问题，我还没有在真正的设备或IOS/web上做过，如果有任何帮助，将不胜感激。
Here is the code
import React from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
const App = () => {
// components
浏览 28提问于2021-05-23得票数 0
回答已采纳
我在react native中有这个屏幕
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
浏览 2提问于2016-11-19得票数 3
2回答
我正在尝试做一个模型，它显示以前在表单中提交的值。我在用ReactJ。
这是我的ContactForm.js:在这里我定义了不同的输入、验证和函数。
import React, {useState} from 'react'
import SubmitBtn from '../atoms/SubmitBtn';
import './ContactForm.css'
import './Modal.css'
import FormInput from '../molecules/FormInput'
import M
浏览 3提问于2022-08-29得票数 1
回答已采纳
我目前正在使用Formik库在React JS中制作一个表单。我遇到了一个验证问题，我需要用空字符串更改无效的字母。 str.replace(/\D/, '); 但是我不能访问Formik值中的input。我需要在每次按键时验证值，但Formik文档中没有关于它的信息。 组件Form import React, {useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, useFormikContext } from &#
浏览 15提问于2021-08-31得票数 0
我有以下错误
不变量冲突:元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从它定义的文件中导出组件
我读过很多关于这个错误的文章，比如或，但是他们都说了同样的话:我错误地导出了组件。但我不明白我的出口有什么问题
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, ImageBackground, Linking, TouchableOpacity, TouchableHighlight, Alert, B
浏览 0提问于2019-04-09得票数 0
2回答
我的setState方法没有被调用，而在setState之后打印值总是打印默认值。我正在使用expo
从‘React’导入react；
从“./ KeyboardShift”导入KeyboardShift；从“FloatingLabel -native-floating-labels”导入标签；
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
focusDescriptionInput: false
}
浏览 0提问于2019-08-31得票数 1
1回答
我已经安装了本机0.30，在更新和执行我在互联网上找到的一段旧代码时遇到了麻烦。
下面是旧的rn代码：
"use strict";
var React = require("react-native");
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
AsyncStorage,
} = React;
var ReactProject = React.createClass({
componentDidMount: function() {
浏览 5提问于2016-07-30得票数 0
回答已采纳
我尝试通过动态地将列表项添加到state中的数组中，然后使用map运算符来迭代它们来创建列表。但是，新列表项仅在第二次单击处理setState方法的按钮后呈现。对解决这个问题有什么建议吗？
...
constructor(props) {
super(props);
this.state = {
requirements:[], // Placeholder array in state
currentRequirement
}
}
...
在我的render方法中，我有这个。
{
this.state.requirements.
浏览 0提问于2018-08-10得票数 0
2回答
我正在尝试将我的单页注册转换成一个多页注册表单，并试图通过使用Redux来完成这一任务。
操作文件如下所示，其中RegisterA1引用注册的第一页，RegisterA2引用注册的第二页。
export const RegisterA1 = (email, password) => {
return {
type: 'REGISTER1',
email: email,
password: password
};
};
export const RegisterA2 = (first, last, dob
浏览 6提问于2017-09-20得票数 2
我使用的是来自React Native Elements的FormInput元素，它似乎会在每个FormInput组件下面生成一行。其中一个比另一个更暗淡。
表单如下所示
<View style={styles.container}>
<Image
style={styles.image}
source={app.imageBackground}
/>
<View style={
浏览 1提问于2018-05-30得票数 4
2回答
所以我要建立一个以react为母语的登录表单。最终，我希望它接受用户名和密码输入，然后将其发布到我的后端API中。但是，每当我尝试在输入字段中键入时，都不允许在输入字段中键入文本。键入的字符会出现一秒，然后消失。我倾向于说问题在于onChange={}道具，但这可能是完全错误的。已经被挂了几个小时了，所以任何帮助都是非常感谢的。守则如下：
import React from 'react';
import { FormInput } from 'react-native-elements';
import {Animated, View, TouchableOp
浏览 0提问于2018-09-14得票数 0
回答已采纳
1回答
我有一个结帐表单，我使用了如下所示的实质性UI来制作：
这看起来很小，但是我想改变布局，使名字和姓氏等都排在一起，看起来更像这样(但我不知道该怎么做)：
下面是我的地址表单组件的代码：
return (
<>
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<FormProvider {...methods}>
<form
浏览 2提问于2021-06-10得票数 0
回答已采纳
输入阵列表单验证密码匹配，以显示错误消息，如果贴字和确认密码不匹配
const inputs =[
{
id:1,
name:"username",
type:"text",
placeholder:"username",
errorMsg:"username should be 3-16 characters and shouldn't include special character",
label:"Us
浏览 2提问于2022-10-23得票数 0
我在上完成了所有的设置步骤，我只是尝试在之后做一个简单的头。
如果我在他们的操场上点击“复制代码”按钮，它会给我以下内容：
import * as React from "react";
import { Header, Icon } from "@rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default () => {
return (
<Header
backgroundIm
浏览 12提问于2022-08-26得票数 0
回答已采纳
我偶然发现了这样一个问题:每当我在TextInput上键入任何内容时，都没有文本类型，这意味着它是空白的。
我用的是打字稿。这是我的FormInput代码：
import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {COLORS, FONTS} from '../../constants';
interface Props {
placeholderText: string;
labelValue: any;
浏览 0提问于2021-10-12得票数 1
回答已采纳
2回答
IDE不承认Jest及其功能
、、、、
我有一个基本的反应-本地/世博模板应用程序。我在开发依赖项中添加了jest-expo和react-test-renderer，并像中所记录的那样更新了package.json。
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
...
"test": "jest"
},
"dependencies": {
"expo": "~41.0.1",
...
浏览 5提问于2021-06-08得票数 2
我使用useState钩子更新表单中输入的值。这是我在useState钩子中使用的对象：
const [values, setValues ] = useState({
name: '',
lastname: '',
email: '',
confirmEmail: '',
message: ''
});
然后，我有一个带有输入的数组，在那里输入id和其他字段：
const inputs = [
{
id: Math.random(),
n
浏览 6提问于2022-08-24得票数 0
回答已采纳
如何在react-native中对齐ImageBackground组件右上角的关闭按钮图标
代码：
<ImageBackground
source={require('../images/AppIntro/1.png')}
style={{ width: '100%', height: 150 }}
>
<TouchableOpacity>
<Icon name="md-close" style={styles.closeButton} />
</TouchableOpaci
浏览 52提问于2018-02-03得票数 2
回答已采纳
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
目前，我正试图在React中创建一个接受表单的应用程序。此表单包含用户可以直接键入的输入字段，这将在formInput对象中生成状态更改：
const [formInput, updateFormInput] = useState({
name: "",
job: "",
salary: "",
});
<input
placeholder="Name?"
onChange={(e) =>
updateF
浏览 1提问于2022-07-23得票数 0
1回答
无法理解如何在我的FormInput组件(输入标签下面)中验证和呈现错误消息。请给我建议。不了解错误输出。
SmartForm
import React from "react";
import { useForm, get } from "react-hook-form";
export default function SmartForm({
defaultValues,
register,
children,
...rest
}) {
const props = { ...rest };
const methods = useFo
浏览 3提问于2022-11-18得票数 0
我正在尝试在react native中播放音频。我试图安装react-native-sound，但它没有安装。我已经安装库react-native-sound-player。但是当我按下play按钮时，它显示这个错误：TypeError: null is not an object (evaluating 'RNSoundPlayer.playSoundFile')。下面是我的代码： import SoundPlayer from 'react-native-sound-player';
class myclass extends component {
浏览 68提问于2020-03-15得票数 2
1回答
我在我的应用程序中使用Firebase身份验证，但是每次我尝试登录并按下按钮时，它都会给我一个错误: Object不是一个函数(计算‘this 2.state’({ error：‘身份验证失败’，加载: false })
我也查过类似的答案，但似乎不符合我的问题。任何帮助都将不胜感激。
这是我的代码：
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
TouchableOpacity,
Image,
浏览 0提问于2018-05-21得票数 0
回答已采纳
1回答
在下面的代码中(在auth_shared.js)，中，我有一个希望在调用承诺signInWithEmailAndPassword()或createUserWithEmailAndPassword()时显示的Loading组件(每当用户点击“登录”或“注册”按钮时)。
为此，我认为最好创建一个名为isLoading的状态，并将其最初设置为false。在render()中，我检查isLoading的值，并确定是否应该加载Loading组件或登录或注册字段。如果调用signInWithEmailAndPassword()，则设置isLoading = true以尝试显示Loading组件，而承诺是验
浏览 2提问于2016-08-05得票数 4
回答已采纳
我正在尝试在react-native中的webView和使用React-360创建的web应用(当然还有React)之间创建一种通信。我正在使用react-native-webview，并在此链接中遵循以下指南来创建通信：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md使用页面中的示例，使用一个简单的html页面(类似于链接中的示例)，在脚本部分使用函数window.ReactNativeWebView.postMessage(data)它工作得很好： <W
浏览 46提问于2020-06-18得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
