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)
如果您的堆栈维护良好，则后退按钮将自动显示在带有标题的顶部。

Answer 2

static navigationOptions = {header：null}此命令使用隐藏标题，我认为您可以删除“ param ['headerMode'] ='none'”，然后此代码可以正常工作

Answer 3

问题在于您正在告诉堆栈不呈现标头设置：

param['headerMode'] = 'none'

您需要的backIcon呈现在Header内部，将其设置为“ none”将阻止其显示。

关于您正在谈论的白色“线条”问题，该线条是您可以随意设置样式和移动的标题。

您必须全局将其隐藏起来，而headerMode设置为none，（但这将意味着您将必须创建自己的backButton），根据屏幕/图形对其进行样式设置或隐藏标题一个特定的屏幕（或显示）。

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

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

    }

在组件内部进行反应

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

3 个答案: