javascript - 你能帮我设计 React Native 应用程序的布局吗？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

如何创建this React Native 上的布局？你能给我举个例子吗？我不明白如何创建它，因为这里的 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,

    }
});