如何在 react-native 中将状态从组件传递到主屏幕

Question

我无法在 react-native 中将状态从组件传递到主屏幕

例如

MainScreen.js

const MainScreen = () => {
  return (
    <>
     <AdButton/>
     <Text>{adCreated}</Text>
    </>

  )
}

AdButton.js

 const [adCreated, createAd] = useState(false);

 const adButton = () => {
   createAd(true);
 }

 const AdButton = () => {
   return (
     <TouchableOpacity onPress={adButton}>Create an Ad</TouchableOpacity>
   )
 }

当 AdButton 组件中的状态发生变化时，如何在主屏幕上显示 adCreated 的状态 true。

谢谢，

Arnav

Answer 1

为此，您需要提升状态如果您的用例不包含这些项目的映射，只需在主组件中声明状态并将其作为支持 children.

编辑：

const MainScreen = () => {
  const [adCreated, createdAd] = useState(false);
  return (
       <>
         <AdButton createdAd={createdAd}/>
         <Text>{adCreated}</Text>
       </>

      )
    }


const AdButton = ({createdAd}) => {
   
    return (
      <TouchableOpacity onPress={createdAd((prev) => !prev)}>Create an Ad</TouchableOpacity>
   )
 }

根据您的要求，您可以在尝试完成此操作时遵循此类行为。

如何在 react-native 中将状态从组件传递到主屏幕

How to pass state from component to main screen in react-native

javascript

reactjs

react-native