Question

为实现社交网络，我有Feed屏幕，Post屏幕和Compose屏幕

我需要能够在Feed和Post页面上来回导航，因此它们位于同一堆栈中。

需要将“撰写”屏幕作为带有单独导航栏的模型弹出。

当前实现是这样：

const MainStack = new StackNavigator({
    Feed: { screen: Feed },
    Post: { screen: Post },
});

我尝试了两种选择：

将撰写屏幕添加到主导航器 =>即使覆盖了导航选项，也没有标题：

export const Navigation = StackNavigator(
  {
    MainStack: { screen: MainStack },
    Compose: { screen: Compose, navigationOptions: { headerMode: "screen" } },
  },
  { headerMode: "none", mode: "modal" }
);

将Compose屏幕放置在一个单独的堆栈中=>我们得到一个带有后退按钮的标题，但是按下它并不会返回到主堆栈

const ComposeStack = new StackNavigator({
    Compose: { screen: Compose },    
});

export const Navigation = StackNavigator(
  {
    MainStack: { screen: MainStack },
    ComposeStack: { screen: ComposeStack },
  },
  { headerMode: "none", mode: "modal" }
);

任何帮助将不胜感激！

Answer 1

尝试此代码。发生的情况是，现在已经指定了自定义标题左按钮，以便您能够导航回例如Post来自模式。您可以使用您选择的库中的后退箭头图标来代替Go Back。

const MainStack = new StackNavigator({
    Feed: { screen: Feed },
    Post: { screen: Post }
}, {
    headerMode: "screen",
    modal: "card"
});

const ComposeStack = new StackNavigator({
    Compose: { 
      screen: Compose, 
      navigationOptions: ({navigation}) => ({ 
        headerLeft: 
          <TouchableOpacity onPress={()=>{navigation.navigate('Post')}}>
            <Text>Go Back</Text>
          </TouchableOpacity> 
      })
    },    
} );

export const Navigation = StackNavigator({
    MainStack: { screen: MainStack },
    ComposeStack: { screen: ComposeStack },
},
{ 
    headerMode: "none", mode: "modal" 
});

Answer 2

我最终按照here的说明手动放置了反应导航的内部Header组件。

绝对不是完美的解决方案，但它可以工作。

如果有人知道的话，还是会选择一种更好的方法。

import Header from 'react-navigation/src/views/Header/Header';

class ModalScreen extends React.Component {
  render() {
   return (
     ...
     <Header scene={{index: 0}}
             scenes={[{index: 0, isActive: true}]}
             navigation={{state: {index: 0}}}
             getScreenDetails={() => ({options: {
                title: 'Modal',
                headerRight: (
                  <Button 
                     title="Close" 
                     onPress={() => this.props.navigation.goBack()}
                  />
                )
             }})}
     />
     ...
   );
  }
}

Answer 3

如果您通过以下方式设置堆栈导航，则无需手动在模态屏幕上设置标题即可执行此操作：

export const Navigation = StackNavigator({
  MainStack: { 
    screen: MainStack,
    navigationOptions: { header: null },
  },
  Compose: { 
    screen: Compose,
  },
}, {
  mode: "modal",
});

使用此设置，MainStack将呈现为没有标题，而您的Compose模态将具有一个标题。

Answer 4

只需将模式屏幕转换为StackNavigator：

const modalStack = StackNavigator({
  Modal: { screen: Modal }
})

export const Navigation = StackNavigator({
  App: { screen: App },
  Modal: { screen: modalStack },
}, {
  mode: 'modal',
  headerMode: 'none'
})

要从模式返回到应用程序：

function handleBackButtonPressed() {
  navigation.goBack(null)
}

带标题/后退按钮的反应导航模式

4 个答案: