如何创建动态的 React Native 组件

Posted

技术标签:

【中文标题】如何创建动态的 React Native 组件【英文标题】:How to create dynamic React Native components 【发布时间】:2021-04-15 11:10:23 【问题描述】:

我希望在单击事件发生时动态创建和使用按钮。按钮的创建位置应在现有按钮右侧 10px 处创建。向伟大而善良的朋友寻求帮助。 这是我的代码

import React,  Component  from 'react'
import  Button  from 'react-native'
const Test = () =>  
    return( 
        <Button title='test' onPress=<Button title='test1'/>/> 
    ) 
 
export default Test 

import React,  Component  from 'react'
import  Button  from 'react-native'
const Test = () =>  
    return( 
        <Button title='test' onPress=ButtonRender/> 
    ) 

const ButtonRender =():any=>
    return <Button title='test1'/>

export default Test 

我有问题。它不是创建的 Button。我需要帮助

【问题讨论】:

【参考方案1】:

创建状态变量buttonClicked=false

<button onclick=() => setState(buttonClicked=true)/>
state.buttonClicked?<button></button>:null

并在单击按钮时更新状态

请为创建的按钮设置样式

【讨论】:

以上是关于如何创建动态的 React Native 组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native 中动态创建多个 Refs

如何在组件 React / React-native 的单独页面中使用动态 graphql(字符串)

在功能组件 React native 中动态创建对列表视图中项目的引用

如何从登录页面获取用户名并在 React Native 的所有页面(组件)上动态使用它

React-Native:如何创建多个 Native UI 组件的实例?

如何使用 React Native SVG 管理动态填充