你能帮我处理本机应用程序的布局吗？ [关闭]

Question

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

Answer 1

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,

    }
});