React Native中的Flex标头布局

Question

I'm new here on react native, And i was trying to align the back button to the left, But keeping the title on the center, But nothing works, This is the code.

The TouchableOpacity is the back button, And the Text is the title, Each one have his own style.

 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; 

Thanks for helping.

Answer 1

You are using alignItems: 'center' in your container, so everything will be in the center.

In your case, there are a lot of solutions available. The more simple is just use a position: absolute; left: 15 position: absolute; left: 15 in the styles.backBtnStyle .

Answer 2

You should try to view this document about Flex in React native and practive more to mastered it.

In Your case, just simplify add alignSelf: 'flex-start' to backBtnStyle StyleSheet to make it in first of your parent component

Here is demo code:

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>

You see: TouchableOpacity contain a Viewable Layout and wrap your image then you need to set style for TouchableOpacity to make flex work, not at Image.

From React NativeTouchableOpacity Documents : Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout.

You can see Touchable Opacity Document here

Note : Set Your StyleSheet on StyleSheet.create() to make it create one and only one time when your bundle load. It make your app light weight and faster

Read about React Native StyleSheet here