在react-native中对齐导航屏幕内容-alignnavscreencontentinreact-native

I am very new to react-native. I am trying to create a drawer using react-navigation. I could use DrawerNavigator but could not show the header/navbar on all the screens. That is why i create a NavScreen component with profile icon, title and back icon. However they are not aligned properly. I need profile icon to be shown on the left side, title on the center and back button on the right side. How can i do this?

我很反应原生。我正在尝试使用react-navigation创建抽屉。我可以使用DrawerNavigator，但无法在所有屏幕上显示标题/导航栏。这就是为什么我创建一个带有配置文件图标，标题和后退图标的NavScreen组件。但是它们没有正确对齐。我需要在左侧显示配置文件图标，在中间显示标题，在右侧显示后退按钮。我怎样才能做到这一点？

Here is my code

这是我的代码

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 10,
  },
});
const NavScreen = ({ navigation, banner }) => (
  
    {banner}
     navigation.navigate('DrawerOpen')}
    />
     navigation.goBack(null)}
    />
  
);

export default NavScreen;


class App extends React.Component {
  static navigatiOnOptions= ({ navigation }) => ({
    title: `${navigation.state.routeName}`,
    drawerTitle: `${navigation.state.routeName}`,
    drawerLabel: 'Home',
    drawerIcon: ({ whiteColor }) => (
      
    ),
  })

  render() {
    const { navigation } = this.props;
    return (
      
        
        Main Screen
      
    );
  }
}

export default App;

I need similar to the below image

我需要类似下面的图像

1 个解决方案

const stackNavigatorCOnfiguration= {
  // set first Screen
  initialRouteName: 'Home',
  mode: Platform.OS === 'ios' ? 'card' : 'card',
  navigationOptions: ({navigation}) => ({
    headerRight: ,
    headerLeft: ,
    headerBackTitle: null
  })
}

const YourProfileButton = ({ navigation }) => (
  
     navigation.goBack(null)}
    />
  
)

const DrawerButton = ({ navigation }) => (
  
     navigation.navigate('DrawerOpen')}
    />
  
)