React native 如何将应用程序的当前状态传递到选项卡导航屏幕

如果我使用的是React Navigation v5，那么将父组件（在我的情况下是主应用程序）的当前状态通过选项卡和堆栈导航器向下传递到我希望使用当前状态的屏幕的最佳方式是什么

在文档之后，我为每个选项卡创建了一个堆栈导航器，其中包含相应的屏幕

App.js包含一个状态，需要用于一些事情。最重要的是，它将在选项卡导航器上提供徽章计数，并且是其中一个选项卡屏幕上的平面列表数据源

从应用程序一直到选项卡导航器的堆栈导航器中的子组件，获取状态的正确方法是什么

App.js

const Tab=createBottomTabNavigator（）
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
所需阵列：[]
}
}
const updateTheArray=（newArray）=>{
这是我的国家({
所需阵列：新阵列
})
}
componentDidMount（）{
//侦听器，用于搜索附近的蓝牙信标并使用传递的函数更新阵列
StartToServer（更新阵列）
}
组件将卸载（）{
stopObserver（）
}
render（）{
返回(
//包含我需要在其中使用应用程序状态的屏幕的堆栈
)
}
}

NearbyStack.js

//此堆栈包含我需要在其中使用应用程序状态的屏幕
const NearbyStackNav=createStackNav（）
常数NearbyStack=（）=>{
返回(
)
}

NearbyScreen.js

//我要在其中使用应用程序状态的屏幕
屏幕附近的常数=（）=>{
返回(
您可以将一些初始参数传递到屏幕。如果导航到此屏幕时未指定任何参数，则将使用初始参数。它们也会与您传递的任何参数合并。可以使用
initialParams
属性指定初始参数：

用法



NearbyScreen.js

React.useffect（（）=>{
if（route.params？.arrayItem）{
//更新后，使用'route.params.arrayItem'执行某些操作`
//例如，将arrayItem发送到服务器
}
}，[route.params？.arrayItem]）；
您可以将一些初始参数传递到屏幕。如果导航到此屏幕时未指定任何参数，则将使用初始参数。它们还与您传递的任何参数合并。初始参数可以使用
初始参数
属性指定：

用法



NearbyScreen.js

React.useffect（（）=>{
if（route.params？.arrayItem）{
//更新后，使用'route.params.arrayItem'执行某些操作`
//例如，将arrayItem发送到服务器
}
}，[route.params？.arrayItem]）；
我的解决方案是使用React的上下文API

beacontext.js-新
App.js-已修改
从“./path/to/beacontext”导入beacontext
const Tab=createBottomTabNavigator（）
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
所需阵列：[]
}
}
const updateTheArray=（newArray）=>{
这是我的国家({
所需阵列：新阵列
})
}
componentDidMount（）{
StartToServer（更新阵列）
}
组件将卸载（）{
stopObserver（）
}
render（）{
返回(
//在新创建的上下文中包装导航容器！！！
{
返回(
)
}

NearbyScreen.js-已修改
从“./path/to/beacontext”导入beacontext
屏幕附近的常数=（）=>{
返回(
//将组件包装到新上下文的使用者中！！！
{
上下文=>{context}
}
)
}
我的解决方案是使用React的上下文API

beacontext.js-新
App.js-已修改
从“./path/to/beacontext”导入beacontext
const Tab=createBottomTabNavigator（）
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
所需阵列：[]
}
}
const updateTheArray=（newArray）=>{
这是我的国家({
所需阵列：新阵列
})
}
componentDidMount（）{
StartToServer（更新阵列）
}
组件将卸载（）{
stopObserver（）
}
render（）{
返回(
//在新创建的上下文中包装导航容器！！！
{
返回(
)
}

NearbyScreen.js-已修改
从“./path/to/beacontext”导入beacontext
屏幕附近的常数=（）=>{
返回(
//将组件包装到新上下文的使用者中！！！
{
上下文=>{context}
}
)
}
我确实注意到initialParams属性，但是当父级（应用程序）的状态更新为.setState时，是否会进行更新？是的，它会正确检测附近的项目并启动应用程序的UpdateTharray函数（我让它用console.log记录更新后的值，但我将其从示例中排除，以使其尽可能简单）我刚刚测试了这种方法，当父组件的状态更新时，initialParams属性似乎没有更新。应用组件将所需数组初始化为空数组。然后在导航到目标选项卡/屏幕之前调用setState四次。当我点击选项卡时，我会记录路由，并查看参数ill有'NeededArray'的初始空数组，这是NearbyScreen功能组件中的第一件事。当我从那里记录路由参数时，我得到
{“key”：“nearest-QQQF9G7UX1U”，“name”：“nearest”，“params”：{“nearbyArray”：[]}
因此，传递下来的道具似乎仍然是初始化时的值，而不是数组中有四个值的更新状态。嘿，兄弟，你能检查一下这个问题吗？我确实注意到了
const Tab = createBottomTabNavigator()

export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      neededArray: []
    }
  }

  const updateTheArray = (newArray) => {
    this.setState({
      neededArray: newArray
    })
  }

  componentDidMount(){
    //Listener that searches for nearby bluetooth beacons and updates the array with the passed function
    startObserver(updateTheArray)
  }

  componentWillUnmount(){
    stopObserver()
  }

  render(){
    return(
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name = "Home"
            component = { HomeStack }/>
          <Tab.Screen
            name = "About"
            component = { AboutStack }/>

          //The Stack that contains the screen that I need to use the App's state in
          <Tab.Screen
            name = "Nearby"
            component = { NearbyStack }/>
        </Tab.Navigator>
      </NavigationContainer>
    )
  }
}

//This stack holds the screen that I need to use the App's state in

const NearbyStackNav = createStackNav()

const NearbyStack = () => {
  return(
    <NearbyStackNav.Navigator>
      <NearbyStackNav.Screen
        name = "Nearby"
        component = { NearbyScreen }
      />
    </NearbyStackNav.Navigator>
  )
}

//The screen that I want to use the App's state in
const NearbyScreen = () => {
  return(
    <View>
      <FlatList
        //Where I would like to use the App's state
      />
    </View>
  )
}

import React from 'react'

const BeaconContext = React.createContext()

export default BeaconContext

import BeaconContext from './path/to/BeaconContext'

const Tab = createBottomTabNavigator()

export default class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      neededArray: []
    }
  }

  const updateTheArray = (newArray) => {
    this.setState({
      neededArray: newArray
    })
  }

  componentDidMount(){
    startObserver(updateTheArray)
  }

  componentWillUnmount(){
    stopObserver()
  }

  render(){
    return(
      // Wrap the nav container in the newly created context!!!

      <BeaconContext.Provider value = { this.state.neededArray }
        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen
              name = "Home"
              component = { HomeStack }/>
            <Tab.Screen
              name = "About"
              component = { AboutStack }/>
            <Tab.Screen
              name = "Nearby"
              component = { NearbyStack }/>
          </Tab.Navigator>
        </NavigationContainer>
      </BeaconContext.Provider>
    )
  }
}

const NearbyStackNav = createStackNav()

const NearbyStack = () => {
  return(
    <NearbyStackNav.Navigator>
      <NearbyStackNav.Screen
        name = "Nearby"
        component = { NearbyScreen }
      />
    </NearbyStackNav.Navigator>
  )
}

import BeaconContext from './path/to/BeaconContext'

const NearbyScreen = () => {
  return(
    <View>
      //Wrap the component in the new context's consumer!!!

      <BeaconContext.Consumer>
      {
        context => <Text>{ context }</Text>
      }
      </BeaconContext.Consumer>
    </View>
  )
}