你能帮我解决本机应用程序的布局吗？

Question

如何在本机上创建this布局？你能举个例子吗？我不明白如何创造它，因为这里的css很差。

Answer 1

你去了{p> Here。这应该可以让您了解如何在React Native中使用样式。示例代码也在下面：

https://rnplay.org/apps/W0vWoQ

其中一个主要概念是布局的Flexbox，所以我会看一下。 Here是样式的全面概述。

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.one}><Text style={styles.logo}>Text Logo</Text></View>
        <View style={styles.two}></View>
        <View style={styles.three}>
            <Text>Some Texxt</Text>
          </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,    
  },
  logo: {
    color: 'white'
  },  
    one: {
        flex:2,
    backgroundColor: 'black'
    },
 two: {
        flex:7,
        backgroundColor: 'white'
  },
    three: {
    flex: 1,
    backgroundColor: 'white',
    borderTopWidth:4,

    }
});