выровнять содержимое навигационного экрана в react-native

Я очень новичок в React Native. Я пытаюсь создать ящик, используя реагирующую навигацию. Я мог использовать DrawerNavigator, но не мог отображать заголовок/навигационную панель на всех экранах. Вот почему я создаю компонент NavScreen со значком профиля, заголовком и задним значком. Однако они не выровнены должным образом. Мне нужно, чтобы значок профиля отображался слева, заголовок — в центре, а кнопка «Назад» — справа. Как я могу это сделать?

Вот мой код

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 20 : 10,
  },
});
const NavScreen = ({ navigation, banner }) => (
  <ScrollView style={styles.container}>
    <Text>{banner}</Text>
    <Icon
      name="ios-contact-outline"
      size={30}
      color="#000"
      onPress={() => navigation.navigate('DrawerOpen')}
    />
    <Icon
      name="ios-arrow-round-back-outline"
      size={30}
      color="#000"
      onPress={() => navigation.goBack(null)}
    />
  </ScrollView>
);

export default NavScreen;


class App extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.routeName}`,
    drawerTitle: `${navigation.state.routeName}`,
    drawerLabel: 'Home',
    drawerIcon: ({ whiteColor }) => (
      <MaterialIcons name="drafts" size={14} style={{ color: whiteColor }} />
    ),
  })

  render() {
    const { navigation } = this.props;
    return (
      <ScrollView>
        <NavScreen navigation={navigation} banner={'Main'} />
        <Text>Main Screen</Text>
      </ScrollView>
    );
  }
}

export default App;

Мне нужно похожее на изображение ниже

введите здесь описание изображения


react-native reactjs javascript react-navigation
person pythonBeginner    schedule 16.05.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Во-первых, попробуйте создать StackNavigation, в headerRight и headerLeft вы определяете свои пользовательские кнопки (см. выше), теперь вы можете очень легко настроить выравнивание/заполнение, что вам нужно, с вашими значками/кнопками.

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

const YourProfileButton = ({ navigation }) => (
  <TouchableOpacity>
    <Ionicons
      style={styles.profileButton}
      name='ios-menu-outline'
      size={32}
      onPress={() => navigation.goBack(null)}
    />
  </TouchableOpacity>
)

const DrawerButton = ({ navigation }) => (
  <TouchableOpacity>
    <Ionicons
      style={styles.drawerIcon}
      name='ios-menu-outline'
      size={32}
      onPress={() => navigation.navigate('DrawerOpen')}
    />
  </TouchableOpacity>
)
person Claus Shapeshifter    schedule 20.06.2017