反应原生导航栏左按钮

Question

如何在反应原生导航栏leftButton

中将该图标与字符串结合使用

这是我的代码：

<NavigationBar
      tintColor={"#9b2b25"}
      leftButton={{
      title: {<Icon name="chevron-left" size={20} color="#FFFFFF" />Back},
      handler:  () => this.props.navigator.pop()
 } />

Answer 1

假设您使用的是Navigator和routeMapper，只需在路由映射器中添加以下内容：

NavigationBarRouteMapper =
  LeftButton: (route, navigator, index, navState) {
    return if index == 0 && !route.leftTitle && !route.leftButton
    previousRoute = navState.routeStack[index - 1]
    backButton = route.leftButton || previousRoute && <Icon style={styles.backChevron} name='chevron-left' size=22 />

    <TouchableOpacity onPress={() => (try route.leftButtonAction()) || navigator.pop()}>
      <View style={[styles.buttons, styles.leftButtonHolder]}>
        {backButton}
        <Text style={[textElements.mediumText, styles.navBarText, NavigationBarRouteMapper.backTextStyle(backButton)]}>
          {route.leftTitle || (try previousRoute.title)}
        </Text>
      </View>
    </TouchableOpacity>
   }

这样，如果前一个路径堆栈中有一个对象，您将获得后面的V形符号和文本。