如何在组件之间传递状态变量 REACT NATIVE

Question

我有 2 个组件 A 和 B。 如何将变量从组件 A 传递到组件 B ？

组件A.js

const ComponentA = () => {

    //INSET
    const insets = useSafeAreaInsets();
    //GET HEADER HEIGHT
    const [heightHeader, setHeightHeader] = useState(false)


    return (
    <View 
    onLayout={({ nativeEvent }) => {
    const { height } = nativeEvent.layout
    setHeightHeader(height)
    }}>
    </View>
      )
    }
    
export default ComponentA

我想从const [heightHeader, setHeightHeader] = useState(false) 这高度标头多变的

组件B.js

import ComponentA from './ComponentA';

const ComponentB = () => {


return (
<View style={{
      flex:1
      }}>


<View style={{
flex:1,
paddingTop: heightHeader,
}}>
</View>
</View>
  )
}

export default ComponentB

我想得到高度标头从组件到组件的变量。

*这两个组件不在同一个文件中

Answer 1

使用 redux 维护全局状态。 或者 使用 React Navigation 提供的 pass props 功能，如下所示：

function HomeScreen({ navigation: { navigate } }) {
  return (
    <View>
      <Text>This is the home screen of the app</Text>
      <Button
        onPress={() =>
          navigate('Profile', {heightHeader:heightHeader })
        }
        title="Go to Brent's profile"
      />
    </View>
  );
}

更多关注this link