React Native -根据父表单的答案处理动态表单
React Native是一种开源的移动应用开发框架，它允许开发者使用JavaScript和React编写跨平台的原生移动应用。它的主要特点包括：
- 跨平台开发：React Native可以同时在iOS和Android平台上开发应用，大大减少了开发者的工作量和时间成本。
- 原生性能：React Native使用原生组件来构建用户界面，因此应用在性能方面与原生应用相当接近。
- 热更新：React Native支持热更新，可以在不重新发布应用的情况下即时更新应用的代码和界面。
- 生态系统丰富：React Native拥有庞大的开发者社区和丰富的第三方库，可以快速构建复杂的移动应用。
在处理动态表单时，可以根据父表单的答案来动态生成子表单的内容。具体步骤如下：
- 根据父表单的答案，确定需要显示的子表单内容。
- 使用React Native的组件和布局来构建子表单的界面。
- 根据子表单的内容，设计相应的数据结构来存储用户输入的数据。
- 实现表单验证逻辑，确保用户输入的数据符合要求。
- 根据用户输入的数据，进行相应的业务处理，如保存到数据库或发送到服务器。
在腾讯云的产品中，可以使用云函数（Serverless Cloud Function）来处理动态表单。云函数是一种无服务器的计算服务，可以根据事件触发自动运行代码。通过编写云函数，可以实现动态表单的逻辑处理和数据存储。
推荐的腾讯云产品：
- 云函数（Serverless Cloud Function）：https://cloud.tencent.com/product/scf
- 移动推送（Mobile Push）：https://cloud.tencent.com/product/umeng_push
- 数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 存储（COS）：https://cloud.tencent.com/product/cos
- 区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
以上是关于React Native和处理动态表单的简要介绍和推荐的腾讯云产品。如需了解更多详细信息，请点击相应的链接进行查看。
相关·内容
在vs代码中使用react-native，我无法编译我的代码，它抛出了<的语法错误。有许多标签不会对终端的react-native run-android造成问题。
我正在尝试编译的代码片段
import React from 'react';
import {StyleSheet, View, Text, StatusBar, Image, Platform, SafeAreaView, AppRegistry} from 'react-native';
import {Spinner} from './src/components';
浏览 2提问于2020-06-10得票数 0
1回答
我知道安卓有elevation，ios有shadowColor、shadowOffset、shadowOpacity、shadowRadius。但是我想在安卓和ios上得到同样的阴影，但我不能只用elevation来代替安卓。
因此，我测试了包react-native-shadow和react-native-shadow-2，它们不算太糟，但它们有太多的缺省值：
react-native-shadow
老了
不能有子大小
太多的选择都是徒劳的
..。
react-native-shadow-2
支持动态大小(width='100%')。但是Shado
浏览 2提问于2021-07-28得票数 1
我想将一个值-3的状态传递给另一个使用值- 1的功能组件。我如何做到这一点？
我的代码：
屏幕1。
import { Text, TouchableOpacity } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
export default function ScreenOne() {
const navigation = useNavigation();
const
浏览 2提问于2022-03-04得票数 0
1回答
我们正在使用react、react-redux和react-router。在我的一个组件中，我使用来自react-router的<Route>组件来呈现我的一个表单组件。在提交表单并创建事件时，我希望我的父组件(其中包含<Route>组件的组件)重新呈现，以便我的事件列表将包含添加的事件。
render() {
return (
<div>
<PublicEvents events={state.public}/>
<PrivateEvents events={stat
浏览 0提问于2018-03-02得票数 0
因此，我有一个Operations.js组件，当父组件(ParamsForm.js)中的特定按钮被切换时，它会被呈现。现在，我想要的是，当父组件中的表单被提交时，我希望父组件表单字段的数据以及子组件表单字段的数据能够登录到控制台上。有什么办法可以做到这一点吗？
ParamsForm.js
import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styles from '../style.module.css'
浏览 1提问于2022-06-25得票数 0
回答已采纳
2回答
我得到了一个错误：
Unable to find an element with the testID of: input-text
Input.js
import React from "react";
import { View, StyleSheet } from "react-native";
import { Text, TextInput } from "react-native-paper";
const Input = (props) => {
return (
<View>
&
浏览 4提问于2020-07-20得票数 9
我想在我的iOS应用状态栏中显示网络活动指示器。如何在react native中动态调用静态setNetworkActivityIndicatorVisible方法？
浏览 11提问于2017-01-21得票数 0
回答已采纳
我已经在中创建了动态表单--React本机，如果用户单击该按钮，它将在按钮上方添加新表单。用户点击按钮的时间，它会添加那么多的表单。我已经做到了，但我面临的问题，在文本更改。
问题是，当我开始输入表单时，它首先显示秒的分数值，然后变为空值。
下面的是我尝试过的代码
import React, { PureComponent } from 'react'
import {
Text,
View,
TextInput
} from 'react-native'
import { TouchableOpacity } from '
浏览 2提问于2019-08-07得票数 1
2回答
我正在尝试使用styled_components替换一些文本，当行用下面的css样式中断时：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
但是，当我使用文本溢出和/或空白样式时，会出现错误，因为textOverflow和whiteSpace不是有效的样式属性。
如何使用styled_components应用该样式或对本机StyleSheet作出反应？
谢谢!
反应，反应本机e样式的组件版本
{
"react": "16.13.1",
"react-native"
浏览 16提问于2022-01-26得票数 0
我正在使用Gradle版本的3.2.0和compileSdkVersion 28在安卓系统中构建我的React的APK发布版。我正在运行以下命令：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
cd android && ./gradlew clean &&
浏览 1提问于2018-10-05得票数 2
回答已采纳
我在以下版本的react-native的帮助下实现了一个应用程序
{
"lodash": "^4.17.10",
"lottie-ios": "^3.0.3",
"lottie-react-native": "^3.0.1",
"metro-react-native-babel-preset": "^0.53.1",
"moment": "^2.22.2",
**"react
浏览 1提问于2019-09-05得票数 0
我正在尝试禁用基于一些道具更改的拖动功能，不确定如何在'react-native-draggable-flatlist‘上禁用/启用它，请在下面的代码中找到 import DraggableFlatList from 'react-native-draggable-flatlist'
<DraggableFlatList
scrollPercent={5}
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item: any
浏览 22提问于2020-03-30得票数 0
回答已采纳
我在我的React Native App中有这样的政策：
违反Android广告ID政策和开发商分发协议第4.8节
表单Google Play
我使用这个依赖项
"dependencies": {
"lodash": "^4.17.10",
"react": "16.3.1",
"react-native": "0.55.3",
"react-native-device-info": "^0.21.5",
"react-na
浏览 0提问于2018-09-23得票数 3
回答已采纳
1回答
我在用react-native实现动态工具提示时遇到了一个问题。
我想实现工具提示，在其中我必须显示来自后端的动态数据。我尝试实现了react-native-elements ToolTip，react-native-walkthrough-tooltip库。但是有了他们的道具，我就不能达到同样的效果..
我已经尝试在flex的帮助下设置工具提示容器视图，并为内部容器视图提供高度和宽度。
有没有人能教我如何用动态数据来获得合适的高度和宽度？我应该在工具提示道具中设置高度和宽度样式，还是应该使用containerStyle属性，还是应该只将高度宽度设置为内部视图？
上面三个我都试过了，还是没有成
浏览 30提问于2021-06-07得票数 1
我正在尝试为我的屏幕(所有屏幕，)添加一个具有基本功能(菜单按钮和后退按钮)的常量标题栏，但我在使用createBottomTabNavigator时遇到了麻烦。我还没有看到任何东西说这是不可能的，所以如果我犯了一个设计错误，一定要让我知道。
下面是我的最小foobar示例(它运行)：
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-naviga
浏览 1提问于2018-11-24得票数 1
我有一个动态链接的React Native应用程序。安装应用程序后，动态链接将正确打开。但当应用程序没有安装时，我想打开一个特定的网站，而不是AppStore预览页。关于react-native-firebase文档，iOS上的"setFallbackUrl“方法应该可以处理这个问题。但它根本不起作用... 我使用的是react-native-firebase 5.2.1 下面是我创建动态链接的代码： const link = new firebase.links.DynamicLink(`fallback-url¶=?${someparams}`, 'my.
浏览 12提问于2019-02-06得票数 2
1回答
当在标题的左上角单击“Account”按钮但收到错误时，我正在尝试呈现一个完整的屏幕模式。
无法读取未定义的属性导航
我这是怎么回事？
AppNavigator.js文件：
import React, {useState} from 'react';
import {
Button,
Image,
Modal,
Pressable,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {NavigationContainer} fro
浏览 2提问于2021-05-22得票数 0
回答已采纳
我有以下代码，我不明白为什么"TestA“组件可以访问”useEffect“组件中的"s”变量。
import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';
const Test = ({children}) => {
const [init, setInit] = useState(0);
useEffect(() => {
setInit(1);
}, []);
useEffect((
浏览 0提问于2020-05-23得票数 1
2回答
我正在尝试将添加到我的应用程序中
源代码
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import {Agenda} from 'react-native-calendars';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-ve
浏览 2提问于2019-12-05得票数 0
回答已采纳
我从正式的文档中学习了react-native-firebase，按照说明，一切都很好。
据我理解，我应该能够在Firebase动态链接控制台中创建如下链接：https://myapp.page.link/offer?offerid=123456，并能够在我的应用程序中接收offerid参数。但是，当我单击该链接(在iOS模拟器、安卓模拟器和实际设备上)时，应用程序将打开，但我只获得以下数据的链接：
Received initial link {"minimumAppVersion": null, "url": "https://mysite.co/of
浏览 1提问于2020-06-24得票数 6
回答已采纳
我得到以下eslint错误：
42:21 error 'WebSocket' is not defined no-undef
您不能从react-native导入WebSocket，因为它是全局变量，但是当我将WebSocket作为全局变量添加到我的.eslintrc.yml中时，它不会改变错误的结果：
globals:
WebSocket: true
如何在ES Lint中将WebSocket定义为React Native应用程序的全局变量？
这个问题能解决吗？目前我的.eslintrc是这样的：
env:
browser: false
es6: true
浏览 23提问于2017-03-03得票数 7
回答已采纳
我想在类组件中使用navigation，它不是屏幕组件，也不会通过props自动访问navigation，所以我必须将导航作为props传递给它。但是父组件是一个功能组件，我在其中使用了navigation挂钩。但是，如何在子组件中使用navigation？
ParentComponent.js
import React from 'react';
import {View , TouchableOpacity} from 'react-native';
import {useNavigation} from 'react-navigation-hook
浏览 2提问于2020-07-24得票数 0
回答已采纳
2回答
我目前正在试图弄清楚，这个表单是如何在没有输入类型的submit或触发提交的事件处理程序的情况下提交的。
据我所知，这份表格无论如何也不会被修改。它只是得到了新数据的重新渲染。不知怎么的，这在我看来很棘手。
有人能给我解释一下这件事在哪里被评估吗？
Index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import Header from "
浏览 1提问于2021-05-04得票数 0
回答已采纳
1回答
我正在尝试创建一个多步表单。我已经创建了表单，在每个步骤中，都会动态地呈现相应的表单。但是我不知道该如何将道具传递给这些组件，这样当返回时，状态就会被保存下来。我在代码箱中创建了一个沙箱，它在这里
表单的呈现方式如下
{this.props.steps[this.state.componentState].component}
如果组件呈现为下面的静态方式，代码将类似于这样，但我需要动态方式
if(this.state.componentState === 1) {
<Form1 props={props} />
}
代码是
import React from 'rea
浏览 1提问于2017-09-02得票数 1
回答已采纳
我正在用react-native和react-native-paper构建移动应用程序。我在react-native-paper中使用了react-native-paper组件，如果我直接使用SnackBar组件，那么SnackBar组件中的onDismiss函数就能很好地工作。(这意味着snackbar将正确消失)
但是，如果我使用我的原始组件(如SnackBarComponent组件)，它使用了SnackBar组件(提供了react-native-paper )，那么剪贴栏就不会正确消失。
这是我的自定义SnackBar组件和调用原始SnackBar组件的代码。
我最初的SnackBa
浏览 0提问于2019-07-10得票数 2
回答已采纳
1回答
我不得不去做一些任务，那就是创建一个动态选择器选项。但我在互联网上尝试了一些选项，大多数选项都是使用类组件来解释的。但我需要使用功能组件。创建选取器的目的是根据产品的名称选择产品。(因此选取器在标签上指明其名称)。但在这里面，我需要使用所选产品的ID调用post请求，而不是它的名称。因此，当从picker中选择一个选项(作为产品名称)时，我还需要获取Product ID作为输入。 以下是productDetails最终在控制台上运行的代码。 {"data": [{"accountCoordinatorEmail": null, "category&
浏览 17提问于2021-04-03得票数 0
回答已采纳
我从React Native开始，我想知道是否可以为每个元素应用默认的OS样式，这样我就不需要处理每个元素的样式，所以假设我有一个表单和简单的文本列表，对于iOS应用程序，它应该有iOS表单和文本样式，对于安卓应用程序，它的默认样式。 据我所知，目前还没有关于此承诺的官方文档，但我想在此询问是否有解决此问题的方法。
浏览 10提问于2018-12-29得票数 3
回答已采纳
2回答
在react-native的新功能中，我正在尝试创建一个注册页面，页面顶部有一个图像。 ? 我已经实现了这一点，但问题的图像不滚动的页面。由于表单很长，并且在尝试填充表单时，当焦点位于textbox上且keyboard控件出现时，表单滚动，而image保持静态。 风格： imageContainer: {
flex: .7,
width: null,
height: null
},
logoContainer: {
flex: .7,
marginTop: deviceHeight / 8,
},
logo: {
pos
浏览 22提问于2019-03-16得票数 1
回答已采纳
2回答
在使用React.js几天之后，我编写了大部分表单，如下所示(如中所示)：
React.createClass({
handleSubmit: function (event) {
event.preventDefault();
var value = React.findDOMNode(this.refs.text).value;
// do something with the value
},
render: function () {
return (
<form onSubmit={this.handleSubmit}&g
浏览 5提问于2015-07-01得票数 3
回答已采纳
我目前正在开发一个应用程序，使用React。
这个试用应用程序有一个父函数组件和一个子类组件。
我希望使用道具从父级发送一个状态值到子节点。
即使我使用setState()，状态值也不会改变.
我该如何解决我的问题？
以下是代码：
亲本
import React, { useState } from "react";
import { View } from "react-native";
import Child from "../components/Child";
export default function Parent() {
浏览 0提问于2020-08-12得票数 0
回答已采纳
我正在用react native开发一个移动应用程序。我有一个组件"Period“，它有几个状态，每个状态都被存储为TextInputs。此组件在平面列表中呈现多次。现在我想知道如何才能获得在Flatlist中呈现的每个"Period“实例的状态值？
任何解释如何在React Native中工作。我以为每个组件实例都有它的on状态？
非常感谢
浏览 1提问于2021-07-13得票数 0
我是react上的新手。我正在使用redux开发react应用程序。我有一个表单(我正在使用redux- form )，通过它我可以保存数据或编辑数据。我的问题是，在编辑模式下，我使用componentWillReceiveProps填充数据。并且填充完美，现在当我试图清除表单上的任何字段时，它会再次填充。
componentWillReceiveProps(nextProps){
this.props.dispatch(initialize('NewProject', nextProps.project.project[0]));
}
如果有任何帮助，我将不胜感激
浏览 2提问于2017-03-29得票数 0
Info.plist文件中缺少目的字符串- NSCalendarsUsageDescription键、NSBluetoothPeripheralUsageDescription、NSAppleMusicUsageDescription键、NSMotionUsageDescription键、NSSpeechRecognitionUsageDescription键
我的package.json
"dependencies": {
"immutable": "^3.8.2",
"native-base": "^2
浏览 1提问于2018-09-28得票数 2
我是第一次接触react-native，我正在尝试实现react-stack-navigator，但函数createStackNavigator返回null。我一直在遵循一个教程，在相同的代码中没有这个问题，任何想法都将不胜感激。下面是我的错误： ? 下面是我的代码： import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import { Home } from "
浏览 12提问于2020-01-15得票数 2
回答已采纳
2回答
我是React Native的新手，所以请原谅我缺乏知识。
我想调用子对象内部的一个函数，但该函数是由父对象的事件(这里是onScroll)触发的。
return (
<View
ref={ref => { this.split = ref; }}
"onParentScroll"={() => {
this.split.measureInWindow((x, y, height, width) => {
console.log('X : ' + x)
浏览 10提问于2018-07-23得票数 3
回答已采纳
2回答
反应中的渲染-本机
、、、
我是相对较新的反应本土化，并在一般情况下，建立任何一个UI。我想知道什么时候在编写应用程序时使用render{}函数是合适的。我问这个问题是因为我想知道这个应用程序的效果。例如，如果我创建一个<LinkedIcon>组件并试图在一个屏幕上拥有大量的组件，那么每个点都应该调用render。否则我会怎么做。
示例代码：
import React, { Component } from "react";
import { Linking, View, TouchableHighlight } from "react-native";
浏览 0提问于2019-06-13得票数 0
回答已采纳
我正在使用Expov4.9.1作为这个react本地项目。我正在按照这个实现堆栈导航器。往这边走，App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux'
import HomeScreen from './screens/HomeScreen';
import { store } from './store';
imp
浏览 1提问于2021-07-31得票数 2
回答已采纳
我正在尝试创建一个React Native应用程序，它可以渲染一个具有可互换屏幕和固定视图的区域，以及一些额外的数据/菜单。我从官方的React导航中尝试了解决方案，但是我不能让它工作。
import React, { Component } from "react";
import {createStackNavigator} from 'react-navigation';
import { Text, View,} from 'react-native';
import Details from './DetailsScreen&
浏览 1提问于2018-07-03得票数 0
我刚接触react-native我的组件结构是这样的
MainScreen > LoginScreen > Form > UserInput
> ButtonSubmit
每一个都是一个组件，这就是表单组件
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
&
浏览 0提问于2018-04-06得票数 0
function DateTimePick是一个子函数，用于在父组件保留中呈现领料日期和领料时间。目前代码有两个问题: 1。提交数据后，保留中的表单不会重置。2.子DateTimePick无法更新父保留中“date”和“time”的状态。请看一看，让我知道如何解决这些问题。谢谢。 子函数DateTimePick如下： import React, {useState} from 'react';
import {View, Button, Platform, Text, TextInput, StyleSheet} from 'react-native';
im
浏览 27提问于2021-04-14得票数 0
5回答
使用NativeBase，我添加了一个标头组件。现在，我想以编程的方式检索标题的高度。我该怎么做呢。添加报头的代码如下所示：
我尝试使用Dimensions.get('window')，但它给了我整个视图的高度。
守则：
import React, {Component} from 'react-native';
import {Container, Header, Button, Title, Icon} from 'native-base';
export default class ThemeHeaderExample extends
浏览 0提问于2017-08-15得票数 1
回答已采纳
在React Native中，假设我有如下内容
var styles = { ... }
export default class App extends React.Component {
...
render() {
return(
<View style={styles.container}>
<View style={{width: this.state.widthA}} />
<View style={{width: this.stat
浏览 16提问于2020-06-01得票数 1
回答已采纳
我正在寻找我可以开始的地方的指针。我想创建一个react本机反馈表单，可以用.show方法显示。
例如：
export class FeedbackComponent extends React.component{
show() {
// define this method in a way so that can be called from outside as FeedbackComponent.show()
// which eventually create a new screen with below rendered View
}
render (){
浏览 1提问于2019-11-24得票数 0
就像在react中一样，我们可以检查元素，查看应用于元素的类并动态更改css属性，并可以在UI.Like中查看react native中是否有任何内容?尝试使用react-devtools但尝试更改css属性值，但这在UI中没有反映出来。
浏览 26提问于2020-04-26得票数 0
1回答
我刚开始使用Reactive原住民，我很难理解框架是如何构建的。
我的入口点是App.js，我希望App.js只检查用户是否登录/使用防火墙进行身份验证。在android上使用firebase，一旦用户通过身份验证，他们的状态就会保存在firebase对象中，直到他们手动注销为止。我希望在RN中使用相同的系统。因此，我希望App.js只检查用户是否经过身份验证，如果是，将用户发送到主屏幕(主屏幕组件)或如果不发送用户登录(登录组件)。
我还编写了一个函数，它将检查用户是否经过身份验证并对其进行适当的路由。我也是单独构建的导航容器，但我不知道如何将它们连接在一起。
App.js：
import
浏览 2提问于2021-03-29得票数 0
回答已采纳
我是REact native的新手，我想用Andoid做一个React native的应用。对于React- native，我在上传了一些文档，没有任何关于react native和android集成的教程。
如果任何人有关于这个或项目示例的教程(React native & android )。请分享给我!！谢谢
浏览 0提问于2017-07-20得票数 0
1回答
我想显示一个警告，但我的警告使我的应用程序向下滚动，像这个，我想显示在中心的警报，并提高它。
我试过使用这个css，但是没有工作。
const styles = StyleSheet.create({
elevatedElement: {
zIndex: 3000000,
elevation: 3000000,
},
})
这是我的警报代码
import React, { useState } from 'react'
import { View } from 'react-native';
import { Button, Para
浏览 0提问于2021-11-01得票数 0
回答已采纳
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
1回答
我有一个自定义实体的自定义表单，在我的表单上我有crm注释(备注)，我需要根据需要(根据规则)设置备注部分，我该怎么做？当我点击备注字段时，我看不到字段名称，这是可能的吗？问题涉及到动态crm注释机制
浏览 16提问于2019-01-23得票数 1
如何使用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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
