Question

我正在使用react-native-navigation v2（来自wix）。我已经放置了相当基本的导航来打开模式。

我遇到的问题是，在Android上，我的模态的topBar在模态出现之前就出现了，这给它带来了闪烁效果（请参阅下面的gif，在iOS和Android之间进行比较）。我玩过很多配置选项...但是无法实现平滑的页面过渡（当我将其压入堆栈时，这是相同的问题，Android上的过渡并不平滑）。

下面是我的模块：

“原生”：“ ^ 2.10.0”
“反应”：“ 16.6.3”
“本机”： “ 0.57.8”
“ react-native-navigation”：“ ^ 2.6.0”

在我的index.js中

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    layout: {
      orientation: ['portrait']
    },
    topBar: {
      visible: true,
      drawBehind: false
    },
    animations: {
      push: {
        waitForRender: true,
      },
      showModal: {
        waitForRender: true
      }
    }
  });
  Promise.all([
    Icon.getImageSource("magnify", 30),
    Icon.getImageSource("account", 30),
  ]).then(source => {
    Navigation.setRoot({
      root: {
        stack: {
          children: [{
            component: {
              name: "IdeasScreen",
              options: {
                topBar: {
                  testID: "Home.TopBar",
                  background: {
                    color: themeVars.brandPrimary
                  },
                  title: {
                    text: i18n.t('Home.title'),
                    color: "white"
                  },
                  rightButtons: [{
                      id: 'viewProfile',
                      icon: source[1],
                      color: "white",
                      testID: "Home.profileButton"
                  }, {
                      id: 'searchFriends',
                      icon: source[0],
                      color: "white",
                      testID: "Home.friendsButton"
                  }],
                }
              }
            }
          }
          ]
        }
      }
    })
  })
});

然后在我的App.js（我的主页）中，我的Fab有一个onPress事件：onPress = {this.FabClickedHandler}

FabClickedHandler = () => {
    Promise.all([
      MaterialIcon.getImageSource("close", 30)
    ])
    .catch(err => {
      alert(err);
    })
    .then(source => {
      Navigation.showModal({
        stack: {
          children: [{
            component: {
              name: 'AddIdeaScreen',
              options: {
                topBar: {
                  testID : 'AddIdeaScreen.title',
                  background: {
                    color: themeVars.brandPrimary
                  },
                  leftButtons: [{
                    id: 'cancelButton',
                    testID: 'AddIdeaScreen.cancelButton',
                    ...Platform.select({
                      ios: { text: i18n.t('AddIdeaScreen.cancelButton'), },
                      android: { icon: source[0], }
                    }),
                    color: "white"
                  }],
                  rightButtons: [{
                    id: 'saveButton',
                    testID : 'AddIdeaScreen.saveButton',
                    text: i18n.t('AddIdeaScreen.saveButton'),
                    enabled: false,
                    color: "white"
                  }],
                  title: {
                    text: i18n.t('AddIdeaScreen.title'),
                    color: "white"
                  }
                }
              }
            }
          }]
        }
      })
    })
  }

感谢您的帮助！

React-native-navigation [V2]-Android-模式打开之前，模式的topBar可见

0 个答案: