当其他按钮的 onPress 事件时 React-Native 创建按钮

Question

我希望在 onPress 事件发生时动态创建和使用按钮。向好朋友寻求帮助。

我想要 { 在屏幕上一个 Button , -> Button click -> 创建一个 Button -> 所以我们有两个按钮 }

这是我的代码

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。我需要帮助

Answer 1

你不能在 onPress 方法中渲染代码。

onPress={ButtonRender} 
 

这段代码不会将代码渲染到虚拟dom。基本上您不能从onPress 返回值，而是可以更改组件的状态，这会导致组件重新呈现。

那么你如何解决这个问题（另一种方法）只是一个例子没有测试过

import React, { Component } from 'react'
import { Button,Text } from 'react-native'
  function TestUseState() {

  const [buttonArr, setButtonArr] = React.useState([]);
const renderButtons = () =>{
  return buttonArr.map ((item,index)=> 
                         <Button key={index} title= "your title"> </Button > 
                       )
} 
  return (
    <>
      <Text>Buttons List</Text>
      {renderButtons()}
     <Button onPress={() => setButtonArr( [...buttonArr , "Unique Index of new Button"] )} title="Add Button"></Button> 
    </>
  )
}