布局安排阵营本地

Question

我试图使用本机作出反应这Instagram的布局工作：

但是，我不能妥善安排布局。这里是我的代码：

import React from 'react'; 
import { StyleSheet, Text, View, Image, Button } from 'react-native'; 
import StatusBarBackground from './StatusBarBackground'; 

export default class App extends React.Component { 
    render() { 
    return (
     <View> 
      <StatusBarBackground /> 
      <View style={styles.user_profile}> 
       <View style={styles.container}> 
       <Image style={styles.image} source={require('./images/user_profile.jpg')}/> 
       </View> 
       <View style={{flex: 1, flexDirection: 'row'}}> 
        <View style={styles.container}> 
        <Text style={styles.numbers}>128</Text> 
        <Text style={styles.grey_text}>posts</Text> 
        </View> 
        <View style={styles.container}> 
        <Text style={styles.numbers}>256</Text> 
        <Text style={styles.grey_text}>followers</Text> 
        </View> 
        <View style={styles.container}> 
        <Text style={styles.numbers}>184</Text> 
        <Text style={styles.grey_text}>following</Text> 
        </View> 
       </View> 
       <View style={styles.btnContainer}> 
       <Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} /> 
       </View> 
      </View> 
     </View> 
    ); 
    } 

    onPressEditProfile(event) { 
    console.log('Clicked Edit Profile'); 
    } 
} 

const styles = StyleSheet.create({ 
    user_profile: { 
    width: '100%', 
    height: 120, 
    alignItems: 'flex-start', 
    flexDirection: 'row', 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    image: { 
    height: 100, 
    borderRadius: 50, 
    width: 100, 
    margin: 10, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    grey_text: { 
    color: '#999', 
    }, 
    numbers: { 
    fontWeight: 'bold', 
    }, 
    btnContainer: { 
    backgroundColor: '#CCC', 
    borderRadius: 10, 
    padding: 10, 
    }, 
}); 

现在看起来是这样的：

我是怎么布局错过？

Answer 1

您刚刚申请flexDirection: 'row'普通容器，它是你的结果布局的原因。 我提供了一些伪代码，仅供您理解。

const style = StyleSheet.create({ 
 
\t container: {}, 
 
\t infoTopRow: { 
 
\t \t flexDirection: 'row', 
 
\t \t justifyContent: 'space-between', 
 
\t \t alignItems: 'center', 
 
\t }, 
 
\t infoBottomRow: { 
 
\t \t justifyContent: 'center', 
 
\t \t alignItems: 'center', 
 
\t }, 
 
}); 
 

 
<View style={...}> 
 
    <Avatar/> 
 
    <View style={...}> {/* <---- here should be flexDirection: 'column' or just don't set any value for it */} 
 
\t <View style={style.infoTopRow}> 
 
\t <InfoBlock title="posts" value="128" /> 
 
\t <InfoBlock title="followers" value="256" /> 
 
\t <InfoBlock title="following" value="184" /> 
 
\t </View> 
 
    <View> 
 
    \t <Button title="Edit Profile" /> 
 
    </View> 
 
    </View> 
 
</View>

Answer 2

你缺少一个更包装纸列视图

<View> 
    <StatusBarBackground /> 
    <View style={styles.user_profile}> 
     //Make this container something like flex:0.2 
     <View style={styles.container}> 
      <Image style={styles.image} source={require('./images/user_profile.jpg')}/> 
     </View> 
     // You need another column view wrapper 
     <View style={{flex:0.8}}> 
      <View style={{flex: 1, flexDirection: 'row'}}> 
       <View style={styles.container}> 
        <Text style={styles.numbers}>128</Text> 
        <Text style={styles.grey_text}>posts</Text> 
       </View> 
       <View style={styles.container}> 
        <Text style={styles.numbers}>256</Text> 
        <Text style={styles.grey_text}>followers</Text> 
       </View> 
       <View style={styles.container}> 
        <Text style={styles.numbers}>184</Text> 
        <Text style={styles.grey_text}>following</Text> 
       </View> 
      </View> 
      <View style={styles.btnContainer}> 
       <Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} /> 
      </View> 
     </View> 
    </View> 
</View>