Question

我是反应原生的新人。

我有一个带有2个标签的主屏幕：＆＃34; NYT Book List＆＃34;和＃34;我的图书清单＆＃34; （请参阅附图）。

当我按下＆＃34;添加到列表＆＃34; NYT Book List项目上的按钮，我想更新＆＃34; My Book List＆＃34;有了那个选择。我使用在两个标签屏幕共享的Globals.js（myBooks = new Map（）; global.myBooks = myBooks）中定义的全局变量来跟踪我的选择。

我一直在尝试不同的方式制作“我的图书清单”＃34;每次按下选项卡时重新渲染，但没有成功。我知道RN设计只是在有道具或状态变化时重新渲染。我想我已经尝试过了，不确定我是否做到了这一点。

有人可以告诉我，我需要编码什么才能强制重新制作标签视图？

感谢。

这是我的router.js：

import React from 'react';

import { StackNavigator, TabNavigator} from 'react-navigation';
import BookList from './BookList'
import BookDetails from './BookDetails';
import MyList from './MyList'
import { Icon } from 'react-native-elements';

const MainScreenNavigator = TabNavigator(
  {
    BookListScreen: { 
      screen: BookList, 

       navigationOptions: ({navigation}) => ({title: "New York Times Book List", 
                              tabBarLabel: "NYT Book List",
                              tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,

          }),   


      },

    MyListsScreen: { 

        screen:  MyList,
        navigationOptions: ({navigation})  => ({
                              title: "My Book List", 
                              tabBarLabel: "My Book List",
                              tabBarIcon: ({ tintColor }) => <Icon name="loyalty" size={35} color={tintColor} />,


          }),   



      },
  },
  {
    tabBarOptions: 
    {
      showIcon: true
    }
  }
);



export const Root = StackNavigator({
  LandingScreen: {
    screen: MainScreenNavigator,

  },
  BookDetailsScreen: {
    screen: BookDetails,
    navigationOptions: ({ navigation }) => ({
      title: `Book Details`,
    }),
  },
  MyListScreen: {
    screen: MyList,
    navigationOptions: ({ navigation }) => ({
      title: `My Book List`,
    }),
  },
});

Screen shot of screen with the tabs

如何强制tabnavigator屏幕在react-native中重新渲染

0 个答案: