StackNavigator 中的后退图标未出现 - React Native

Question

我尝试编写一个函数来在 React Native 中创建 Stack Navigator。一切正常，但没有后退图标可导航回首页和信息堆栈。有人可以帮忙吗？

在generateNav.js中：创建StackNavigator的函数

const generateNav = (title, menu) => {
    var route = {}
    var param = {}
    route[title] = {
        screen: ViewMenu, 
        params: { menu: menu}
    }

    param['initialRouteName'] = title
    // to get rid of white space at the top of application
    param['headerMode'] = 'none'
    param['navigationOptions'] = { 'headerBackTitle': title }

    return (createStackNavigator(route, param))
}

export { generateNav }

在navigation.js中：创建BottomTabNavigator，包括2个堆栈导航器（HomeNavigator、InfoNavigator）

const HomeNavigator = generateNav(Home, homeMenu)
const InfoNavigator = generateNav(Info, infoMenu)

const AppNavigator = createBottomTabNavigator(
    {
        Home: { screen: HomeNavigator },
        Info: { screen: InfoNavigator }
    }
)

在 ViewMenu.js 中：呈现堆栈导航器列表。单击每个项目时我需要有一个后退图标。

export default class ViewMenu extends Component {
  constructor(props) {
    super(props)
    this.menu = this.props.navigation.getParam('menu', this.props.menu)
  }

  onSelect = (item) => {
    this.props.navigation.navigate(item.link)
  }

  renderItem = ({item}) => {
    return (
      <View style={styles.mainMenu}>
        { (item.icon) && 
          <Image source={item.icon} style={styles.icon} />
        }
        <Text style={styles.txt} onPress={() => this.onSelect(item)}>
          {item.name}
        </Text>
      </View>
    )
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
          <MyHeader />
          <FlatList 
              data = {this.menu}
              renderItem = {this.renderItem}
              keyExtractor = {(item, index) => index.toString()}
          />
      </View>
    )
  }
}

Answer 1

使用this.props.navigation.navigate('screenName)
如果您的堆栈维护良好，后退按钮将自动出现在顶部 header。

Answer 2

static navigationOptions={header:null} 此命令用于隐藏 header, 我想你可以删除 "param['headerMode'] = 'none'" 这段代码然后就可以正常工作了

Answer 3

问题是您告诉堆栈不要渲染 header 设置：

param['headerMode'] = 'none'

你需要的backIcon在Header里面渲染，设置成"none"会阻止它出现。

关于您所说的白色 "line" 问题，该行是 header 您可以根据需要设置样式和移动。

你必须自己为堆栈全局隐藏它，将 headerMode 设置为 none，（但这意味着你必须创建自己的 backButton），设置样式根据您的 screen/graphic 或隐藏一个特定屏幕（或显示）的 header。

例如，成像你删除了 headerMode: "none"，你需要进入有白条的屏幕并添加：

 static navigationOptions = () => {
        return ({ header: null})

    }

在你的内部反应组件

StackNavigator 中的后退图标未出现 - React Native

Back Icon in StackNavigator doesn't appear - React Native

react-native

stack-navigator