Làm thế nào để biện minh (trái, phải, chính giữa) mỗi đứa trẻ một cách độc lập?

Question

Trong phản ứng tự nhiên tôi có:

<View style={styles.navBar}> 
    <Text>{'<'}</Text> 
    <Text style={styles.navBarTitle}> 
     Fitness & Nutrition Tracking 
    </Text> 
    <Image source={icon} style={styles.icon}/> 
</View> 

với những phong cách:

{ 
    navBar: { 
     height: 60, 
     flexDirection: 'row', 
     justifyContent: 'space-between', 
     alignItems: 'center', 
    }, 
    navBarTitle: { 
     textAlign: 'center', 
    }, 
    icon: { 
     height: 60, 
     resizeMode: 'contain', 
    }, 
} 

Đây là kết quả mà tôi nhận được:

Đây là hiệu ứng tôi muốn:

Trong ví dụ đầu tiên, khoảng cách giữa các mục bằng nhau.

Trong ví dụ thứ hai, mỗi mục được biện minh khác nhau. Mục đầu tiên được canh lề trái. Mục thứ hai được căn giữa. Thứ ba, đúng hợp lý.

This question tương tự, nhưng có vẻ như phản ứng gốc không hỗ trợ margin: 'auto'. Hơn nữa, các câu trả lời khác chỉ hoạt động nếu bạn chỉ quan tâm đến sự biện minh trái và phải, nhưng không ai thực sự giải quyết sự biện minh trung tâm mà không có lề tự động.

Tôi đang cố gắng tạo thanh điều hướng theo kiểu gốc có phản ứng. Phiên bản ios vani trông như thế này:

Làm thế nào để làm điều gì đó tương tự? Tôi chủ yếu quan tâm đến việc định tâm.

Answer 1

Một cách là sử dụng lồng View (container flex) cho 3 khu vực khác nhau và thiết lập flex: 1 đến khu vực trái và phải

<View style={styles.navBar}> 
    <View style={styles.leftContainer}> 
    <Text style={[styles.text, {textAlign: 'left'}]}> 
     {'<'} 
    </Text> 
    </View> 
    <Text style={styles.text}> 
    Fitness & Nutrition Tracking 
    </Text> 
    <View style={styles.rightContainer}> 
    <View style={styles.rightIcon}/> 
    </View> 
</View> 

const styles = StyleSheet.create({ 
    navBar: { 
    height: 60, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    backgroundColor: 'blue', 
    }, 
    leftContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-start', 
    backgroundColor: 'green' 
    }, 
    rightContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-end', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    rightIcon: { 
    height: 10, 
    width: 10, 
    resizeMode: 'contain', 
    backgroundColor: 'white', 
    } 
}); 

Answer 2

Nếu bạn đang sử dụng một Navigationbar từ Mô-đun điều hướng nhìn thấy câu hỏi của tôi: Changing the default style for a Navigator.NavigationBar (title)