React Native中的Flex标头布局

Question

我在这里是本机上的新手，并且我试图将“后退”按钮向左对齐，但是将标题居中，但没有任何效果，这是代码。

TouchableOpacity是后退按钮，Text是标题，每个人都有自己的风格。

 import React, { Component } from 'react'; import { View, Text, TouchableOpacity, Image } from 'react-native'; import { Colors } from '../Variables'; class Header extends Component { render(){ return( <View style={ styles.headerStyle }> <TouchableOpacity> <Image style={ styles.backBtnStyle } source={ require('../graphics/icons/arrow_left_white.png') }/> </TouchableOpacity> <Text style={ styles.titleStyle }> TITLE </Text> </View> ); } } const styles = { headerStyle: { backgroundColor: Colors.primary, flexDirection: 'row', alignItems: 'center', }, backBtnStyle: { width: 25, height: 25, margin: 10, }, titleStyle: { color: '#fff', textAlign: 'center', fontSize: 25, } }; export default Header; 

感谢您的帮助。

Answer 1

您在容器中使用alignItems: 'center' ，因此所有内容都将位于中心。

在您的情况下，有很多解决方案可用。 更简单的就是使用position: absolute; left: 15 position: absolute; left: 15 styles.backBtnStyle position: absolute; left: 15 。

Answer 2

您应该尝试在React本机中查看有关Flex的本文档 ，并且更实际地掌握它。

在您的情况下，只需简化将alignSelf: 'flex-start'到backBtnStyle StyleSheet中，使其在您的父组件的第一个组件中

这是演示代码：

headerStyle: {
    backgroundColor: Colors.primary,
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-start'
},

<TouchableOpacity style={styles.backBtnStyle}>
   <Image source={require('../graphics/icons/arrow_left_white.png') }/>
</TouchableOpacity>

您会看到：TouchableOpacity包含一个Viewable Layout并包装您的图像，然后您需要为TouchableOpacity设置样式以使flex工作，而不是在Image处。

来自React NativeTouchableOpacity文档 ：不透明度是通过将子级包装在Animated.View中控制的，该Animated.View已添加到视图层次结构中。 请注意，这会影响布局。

您可以在此处看到可触摸的不透明度文档

注意 ：在StyleSheet.create（）上设置StyleSheet，以使其在加载包时一次创建一次，并且仅创建一次。 它使您的应用重量轻且速度更快

在此处阅读有关React Native StyleSheet的信息