小编HTB*_*HTB的帖子

我正在尝试在 React Native 应用程序中测试异步函数。

class myClass extends React.Component {

  ...

  closeModal = async () => {

    if (someCondition) {
      await myFunction1();
    } else {
      await myFunction2();
    }

    this.props.navigation.state.params.onGoBack();
    this.props.navigation.navigate('Main');
  };

  ...

}

这是我的测试：

const navigation = {
  navigate: jest.fn(),
  state: { params: { onGoBack: jest.fn() } },
};

const renderComponent = overrides => {
  props = {
    navigation,
    ...overrides,
  };

  return shallow(< myClass.wrappedComponent {...props} />);
};


describe('When the user presses the close icon', () => {
    it('should close the modal', …

我定义了一个从数组中删除项目的操作：

export default class myStore {

  @observable items = [];
  ...
  ...

  @action deleteItem = async (target) => {
    try {
      await backendService.deleteItem(target.id);
      runInAction(() => {
        const targetIndex = this.items.indexOf(target);
        this.items.splice(targetIndex, 1);
      });
    } catch (error) {
      ...
    }
  };

  ...
  ...
}

尽管我将组件设置为observer，但它仍然不会更新我的列表，直到我触发一些其他操作（单击、重命名等），在这种情况下，我将能够看到该项目已被删除。

我错过了什么吗？

我正在使用createMaterialTopTabNavigatorfrom react-navigation并尝试通过在其顶部添加一些组件来自定义标签栏。

如您在此处的指南中所见：

https://reactnavigation.org/docs/zh-CN/material-top-tab-navigator.html#docsNav

有一个选项tabBarComponent可以传递以创建您自己的标签栏。但是，它完全覆盖了我不想要的选项卡栏。

我想在选项卡栏的顶部添加一个自定义组件，然后在默认选项卡的下方添加标签。

任何人都可以向我展示如何向选项卡栏添加组件的示例吗？

例如，下面的代码将标签替换为My Custom Component文本，但是如何同时使用它们呢？（自定义组件和标签）

const myNavigation = createMaterialTopTabNavigator({
  firstTab: FirstTabScreen,
  secondTab: SecondTabScreen,
  thirdTab: ThirdTabScreen,
},
{
  tabBarComponent: props => (
    <View><Text>My Custom Component</Text></View>
  )
});

我创建了一个导航仪反应中使用原生createBottomTabNavigator从https://reactnavigation.org/docs/en/bottom-tab-navigator.html

我遇到的问题是我找不到将标签栏内的标签垂直居中的方法。

正如您在屏幕截图中看到的，选项卡底部总是有蓝色区域。即使我手动设置标签的高度，它们也会向上生长。如果我flex:1为标签栏设置，它占用了一半的屏幕，但蓝色区域仍然存在。

tabBar: {
  backgroundColor: 'blue',
  borderWidth: 2,
  height: 32,
  justifyContent: 'center',
  alignItems: 'center',
  padding: 0
},
labelStyle: {
  backgroundColor: 'green',
},
tabStyle: {
  backgroundColor: 'yellow',
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  alignSelf: 'center',
  borderWidth: 1,
  borderColor: 'black',
  marginBottom: 0,
  paddingBottom: 0,
},

这就是我创建导航栏的方式（为了简单起见，我删除了图标）：

const TabNavigator = createBottomTabNavigator(
  {
    screen1: { screen: screen1 },
    screen2: { screen: screen2 },
    screen3: { screen: screen3 },
    screen4: { screen: screen4 },
  },
  {
    tabBarOptions: …