Question

我的路由器设置如下

import { createAppContainer, createDrawerNavigator, createStackNavigator, createSwitchNavigator } from "react-navigation";

import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";

import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";

import SideMenu from "./SideMenu";

const DashboardStack = createStackNavigator(
  {
    Home: { screen: Home },
    Search : {screen : Search}
  }
);

const MapStack = createStackNavigator(
  {
    Map: { screen: Map },
  }
);

const AuthStack = createStackNavigator(
  {
    Login: { screen: Login },
    ForgotPassword: { screen: ForgotPassword },
  }
);

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    Map: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);

export const AppNavigator = createStackNavigator(
  {
    Drawer: { screen: DrawerStack },
    Auth: { screen: AuthStack },
  },
  {
    // initialRouteName: "Drawer",
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(DrawerStack);

一切正常，只是一个小问题。当我从家里导航到搜索屏幕，然后使用参数切换到“地图”屏幕时，这些参数没有到达“地图”屏幕。

我当前的设置为codepan

Answer 1

您的问题是您的MapStack和“地图”屏幕都具有相同的名称“地图”。

只需将MapStack路由替换为诸如“ MapStack”之类的东西，您将获得参数。

请参见此处：https://snack.expo.io/SyTFUPZUB

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    MapStack: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);

Answer 2

@sfratini是正确的

问题确实是“ Map”键存在于两个地方。

因此，navigation.navigate（“ Map”）将导航至MapStack。导航到堆栈意味着转到该堆栈的当前屏幕，该屏幕默认为initialRouteName或堆栈中的第一个屏幕。

要对此进行验证，请在MapStack中将另一个屏幕添加为第一个屏幕，然后检查其行为。

因此，针对您的问题的解决方案是按照@sfratini的建议将“ Map”键重命名为其他名称。

Answer 3

仅通过将地图屏幕添加到仪表板堆栈即可正常工作

function capitalPermutations(word) {
  const res = new Set();
  
  // Push the actual word first.
  res.add(word);
  
  helper(word, res, '');
  
  return res;
  
  function helper(word, res, str='') {
    
    if(str.length === word.length) return;
    
    const len = word.length;
    res.add(word);
    
    // Capitalization
    for(let i=0; i< word.length; i++) {
      const substr = word.substring(0, i+1); // a, ab, abc
      str += substr; // str === "ABC" | len = 3
      const upper = str.toUpperCase(); // A, AB, ABC
      const remaining = `${upper}${word.substring(i, len)}`; // Abc , ABc, 
      helper(remaining, res, str);
    }
  }

}
var testWord1 = "abc"
console.log(capitalPermutations(testWord1))

然后使用

const DashboardStack = createStackNavigator(
  {
    Home: { screen: Home },
    Search : {screen : Search},
     Map: { screen: Map }
  }
);

获取名称参数值

这是代码 https://snack.expo.io/HyEFZeyLB

Answer 4

您可以在“地图”屏幕中访问以下参数：

更新此内容：

property 'text' doesn't exist on type IMenuItem

对此：

  async componentDidMount() {
    this.postsRef = firestore().collection('posts')
    this.oldestPostTime = new Date().getTime()
    this.changesUnsubscribe = () =>
      console.log(
        'This method will be used to unsubscribe our listener when we fetch older posts.'
      )
    this.loadMorePosts()
  }

  loadMorePosts = async () => {
    this.changesUnsubscribe()
    console.log(this.oldestPostTime)
    const posts = await this.postsRef
      .orderBy('created', 'desc')
      .startAt(this.oldestPostTime)
      .limit(this.PAGE_SIZE)
      .get()
      .then(collection => {
        const numPosts = collection.size
        if (numPosts === 0) {
          console.log("0 docs fetched, this shouldn't have been called.")
          return {}
        } else if (numPosts < this.PAGE_SIZE) {
          console.log('No older posts exist. Only listen for new posts now.')
        }

        const posts = { ...this.state.posts }
        collection.forEach(doc => {
          const post = doc.data()
          posts[post.id] = this.prunePost(post)
        })
        console.log('oldest post time was: ', this.oldestPostTime)
        this.oldestPostTime = collection.docs[numPosts - 1].data().created
        console.log('oldest post time is: ', this.oldestPostTime)
        return posts
      })

    console.log('What the fuck')

    await new Promise(res => this.setState({ posts }, () => res()))

    console.log('What the hell')

    this.changesUnsubscribe = firestore()
      .collection('posts')
      .orderBy('created', 'desc')
      .startAt(this.oldestPostTime)
      .onSnapshot(this.onPostsUpdated)
  }

  onPostsUpdated = postsCollection => {
    const posts = { ...this.state.posts }
    postsCollection.docChanges().forEach(({ type, doc }) => {
      const post = doc.data()
      if (type === 'added') {
        if (!posts[post.id]) {
          // If the post is already present, do not add it again.
          // Firestore snapshot does not have simple functionality to only
          // listen to changes on windows of data.
          this.stagePost(post)
        }
      }
      if (type === 'modified') {
        posts[post.id] = this.prunePost(post)
      }
      if (type === 'removed') {
        delete posts[post.id]
      }
    })

    this.setState({ posts })
  }

，您必须将“地图”屏幕放在首页并搜索“堆栈”，如下所示：

render() {
return (
  <SafeAreaView style={styles.container}>
    <Text>Map</Text>
  </SafeAreaView>
)
}

你的小偷的结果：

希望这会有所帮助。

在抽屉堆栈之间传递参数反应导航

4 个答案: