Question

我正在将“ WatermelonDb”和“ React-Navigation 5”一起使用，以从我所有的应用程序屏幕中全局访问数据库变量。

根据我的理解，将初始变量传递到导航中的屏幕，我们使用“ initialParams”。

但是，当我这样做时，我得到一个错误：

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Database'
    |     property 'collections' -> object with constructor 'CollectionMap'
    |     property 'map' -> object with constructor 'Object'
    |     property 'alarms' -> object with constructor 'Collection'
    --- property 'database' closes the circle

是否有一种全局访问数据库变量的替代方法？

这是我的代码部分，我尝试将数据库变量传递给intialParams

render()
  {
return ( 

  <NavigationContainer>
       <Stack.Navigator 
              initialRouteName="HomeScreen">
        <Stack.Screen
          name="HomeScreen"
          component={HomeScreen}      
         initialParams={{db:database} } // <-
          options={{title: 'Welcome',headerShown: false}}
        />
        <Stack.Screen name="AlarmDetails" options={{title: 'Welcome',headerShown: false}} component={AlarmDetails} />
      </Stack.Navigator>
    </NavigationContainer>

  )

Answer 1

似乎无法将不可序列化的对象传递到case 'await': message.channel.sendMessage('React for dm').then(sentMessage => { sentMessage.react('1️⃣').then(() => sentMessage.react('2️⃣')); const filter = (reaction, user) => { return ['1️⃣', '2️⃣'].includes(reaction.emoji.name); }; sentMessage.awaitReactions(filter, { max: 1, time: 60000, errors: ['time'] }) .then(collected => { const reaction = collected.first(); if (reaction.emoji.name === '1️⃣') { message.author.sendMessage('I told you I would!') } }) })中。

可以以不同的方式实现它。您可以只创建一些文件，例如initialParams会导出数据库对象，然后将其导入屏幕。为了避免重复，您还可以例如创建一些HOC，例如database.js，然后将屏幕包装到此组件中。

withDatabase

您也可以出于相同目的使用React Context。

Answer 2

您应该看看Context https://reactjs.org/docs/context.html

Answer 3

我能够通过使用React Context Api使其工作。您可以在https://www.naroju.com/how-to-use-react-context-to-pass-database-reference-to-child-components/处查看示例。您可以为您的用例使用确切的代码。

对所有屏幕反应本机导航传递数据库变量

3 个答案: