小编But*_*tri的帖子

如何在 React Native 中对数组进行分组

我有一组称为“目录”的对象,其中包括人员及其工作的列表。问题是一个人可以承担多个角色,我想在渲染过程中将“工作”分组到同一个“id”下。这是我的数组:

"directory": 
[
    {            
      "id": 37,
      "job": "Electrician",
      "name": "Alan"
    },
    {
      "id": 32,
      "job": "Writer",
      "name": "Mark"
    },
    {
      "id": 37,
      "job": "DIY",
      "name": "Alan"
    },
    {
      "id": 134,
      "job": "Director",
      "name": "Philip"
    },
    {
      "id": 37,
      "job": "Plumber",
      "name": "Alan"
    },
    {
      "id": 85,
      "job": "Teacher",
      "name": "Oliver"
    },
]
Run Code Online (Sandbox Code Playgroud)

我想要一个新的数组显示为:

Alan: Electrician, Plumber, DIY
Mark: Writer
Philip: Director,
Oliver: Teacher
Run Code Online (Sandbox Code Playgroud)

我不确定是否应该使用nested .map 还是reduce。

任何帮助表示赞赏。

arrays array-map javascript-objects reactjs

1
推荐指数
1
解决办法
5204
查看次数

从底部选项卡打开抽屉导航器

我正在将我的应用程序从 react-navigation 4 升级到 5。

在版本 4 中,我有一个选项卡可以使用以下代码打开抽屉

const MainNavigator = createBottomTabNavigator(
  {
More: {      
      screen: AdminNavigator,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          //return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
          return (
            <Icon
              name="tune"
              color={tabInfo.tintColor}
              size={tabInfo.focused ? 32 : 28}
              style={{
                paddingTop: 10,
              }}
            />
          );
        },
        tabBarColor: Colors.primary,       
        tabBarOnPress: ({ navigation }) => {
          navigation.openDrawer();
        },
      },
    },
}
Run Code Online (Sandbox Code Playgroud)

在新版本 5 中,我有以下导航配置

<NavigationContainer>          
    <Drawer.Navigator>
       <Drawer.Screen name="Home" component={TabsScreen} />
       <Drawer.Screen name="Favorites" component={FavoritesStackScreen} />
       <Drawer.Screen name="Language" component={LanguageStackScreen} />
    </Drawer.Navigator>
</NavigationContainer>
Run Code Online (Sandbox Code Playgroud)

其中 TabScreen …

navigation-drawer react-native react-navigation-bottom-tab react-navigation-v5

0
推荐指数
1
解决办法
447
查看次数