0

我正在努力使shoutem / ui NavigationBar上的后退导航箭头在iOS上工作。导航栏看起来像这样,并且可以按预期在 Android 上运行(点击箭头导航到特定的预定义视图):

导航栏

相关布局如下:

import {
  Text,
  Button,
  View,
  Image,
  Divider,
  Spinner,
  NavigationBar,
  Caption
} from '@shoutem/ui';


render() {
  const {navigate} = this.props.navigation;
  if (this.state.submitted && this.props.loading) {
    return (
      <Spinner style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }} />
    );
  }
  return (
    <Container style={{ flex: 1, backgroundColor: '#ffffff' }}>
      <Content>
          <NavigationBar
            styleName='no-border'
            hasHistory
            navigateBack={() => navigate('WelcomeScreen')}
        />
        <Grid>
          <Row style={{ height: 100, justifyContent: 'center', alignItems: 'center', paddingTop: 100 }}>
            <Image
              style={{ width: 96, height: 89 }}
              source={require('../login-logo.png')}
              blurRadius={1} />
          </Row>              
          //some other rows and columns
        </Grid>
      </Content>
    </Container>
    );
   }
 }

在 Android 上,以下工作按预期工作。在 iOS(Xcode 模拟器)上,导航栏显示正确,但点击它什么也不做。也不会生成日志事件或错误。我假设导航栏可以以某种方式被其他元素覆盖。但是,导航栏下方网格内具有不同元素的其他视图也存在相同的问题。有没有人有这个问题的经验?最可能的原因是什么,我做错了什么?

4

1 回答 1

0

在这种情况下,应用于 NavigationBar 的“无边框”样式名被证明是有问题的代码片段。用“内联”替换解决了这个问题,同时在 NavigationBar 下方引入了一个稍微可区分的边框。但是,这看起来像一个错误,并且已经在shoutem/ui GitHub 存储库中打开了以下问题:https ://github.com/shoutem/ui/issues/398

于 2018-05-07T14:56:27.637 回答