背景颜色停止 this.props.navigation.goBack答案

【问题标题】：Background color stops this.props.navigation.goBack背景颜色停止 this.props.navigation.goBack
【发布时间】：2019-08-22 11:28:59
【问题描述】：

goBack 在本机反应中遇到问题。 This.props.navigation.goBack 适用于 TouchableOpacity 但是当我向 View 元素添加背景颜色时，它停止工作。此外，颜色不可见 - 我在模拟器中看不到任何变化。你知道为什么背景颜色停止this.props.navigation.goBack吗？

    const Header = ({onPressCloseArticle }) => (
  <View style={{backgroundColor: 'black'}}>
    <Text>Title</Text>
    <TouchableOpacity style={styles.buttonClose} onPress={onPressCloseArticle}>
      <Image
        source={require('Close.png')}
      />
    </TouchableOpacity>
  </View>
);

export default Header;

【问题讨论】：

你能举一个这个问题的简单例子吗？

标签： javascript react-native react-native-navigation

【解决方案1】：

只需卸载并重新运行应用程序，检查行为是否与您提到的相同，否则如果有任何错误，您将获得相关信息

【讨论】：

我做了几次，行为是一样的，另一方面没有错误信息：/

【解决方案2】：

我无法重现您的问题，但我可以帮助您解决它。

如果您尝试配置Custom Header，可以使用withNavigation。

Header.js

import React from 'react';
import { View,Text,TouchableOpacity,Image } from 'react-native';
import { withNavigation } from 'react-navigation';

class Header extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'black',flexDirection:"row"}}>
    <Text>Title</Text>
      <TouchableOpacity   onPress={() => this.props.navigation.goBack()}>
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
      </TouchableOpacity>
      </View>
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(Header);

用法

import Header from "./Header"
...

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerLeft instead of left
    headerLeft: <Header  />,
  };

我做了例子。在这里Example Link

【讨论】：

@WojciechNowaczyk 如果我的回答有帮助，请为我的回答选择“V”标记和箭头吗？