如何从 react-native 中的导入文件访问导航选项

Question

我正在通过不同的页面向下传递数据到我的应用程序的最后一页，它运行良好。

但问题是最后一页有 2 个组件，所以典型的 </ChatActivity navigation="{this.props.navigation}" />，这就是我的意思：

我有一个App.js

App.js

的内容

import ChatScreen from './chat'
    class ChatActivity extends Component {
      static navigationOptions = {
        ...
      }
      render() {
        return(
            <ChatScreen navigation={this.props.navigation} />
        )
      }
    }

我还有 chat.js 包含聊天组件。 Chat.js 本身，需要 import Fire from './fire.js'

所以现在，this.props.navigation 只传递给了 Chat.js...但我也需要从 fire.js 访问它。

我读过 import {useNavigation}，但根据我的尝试，它没有用，因为我的 fire.js 甚至看起来都不像文档中的示例

这是我的fire.js

class Fire extends React.Component{
  constructor (props) {
    super(props)

    this.init()
    this.checkAuth()
  }
  init = () => {
        firebase.initializeApp({

        })
  };

  checkAuth = () => {
    firebase.auth().onAuthStateChanged(user => {
      if (!user) {
        firebase.auth().signInAnonymously();
      }
    })
  } 
  send = messages  => {
    messages.forEach(item => {
      const message = {
        text: item.text,
        timestamp: firebase.database.ServerValue.TIMESTAMP,
       // image: item.image,
        //video: item.video,
        user: item.user
      }
      this.db.child(`NEED NAVIGATION PARAMS HERE`).push(message)

    })
  }  

  parse = message => {
    const {user, text, timestamp} = message.val();
    const {key, _id} = message
    const createdAt = new Date(timestamp)

    return {
      _id,
      createdAt,
      text,
      user
    }
  }

  get = callback => {
    this.db.child(`NEED NAVIGATION PARAMS HERE`).on('child_added', snapshot => callback(this.parse(snapshot)))
  }

  off() {
    this.db.off()
  }

  get db() {
    return firebase.database().ref(`NEED NAVIGATION PARAMS HERE`);
  }

  get uid(){
    return(firebase.auth().currentUser || {}).uid
  }
}

export default new Fire();

由于无法访问导航参数，我尝试了 AsyncStorage，但这可能不是最佳做法，而且效果不佳。不确定它是 AsyncStorage 还是 react-native-gifted-chat 但是当我加载一次聊天页面时，它会为其他聊天显示相同的消息，直到我重新启动应用程序，这不应该是因为我正在获取数据基于独特的参数。

Answer 1

你刚刚错过了一步...

由于您已通过以下方法将导航作为 props 传递：

<ChatScreen navigation={this.props.navigation} />

聊天屏幕开始使用 ChatActivity 的导航属性。

为了 Fire.js 也能够使用导航，已提供给 Chat.js通过 ChatActivity 您需要将 Chat.js 收到的导航道具传递给 Fire.js同理。

你的 Chat.js 应该是这样的：

import Fire from './Fire'

class Chat extends Component {
    static navigationOptions = {
        ...
    }
    render() {
        return(
            <Fire navigation={this.props.navigation} />
        )
    }
}

这应该可以解决问题。干杯！

如何从 react-native 中的导入文件访问导航选项

How to access naviagtion options from imported file in react-native

reactjs

react-native

react-navigation

react-native-navigation

react-native-gifted-chat