你能帮我在 React Native 应用程序上进行布局吗？

Question

如何在 React Native 上创建 this 布局？你能给我举个例子吗？我不知道如何创建它，因为这里很差css。

Answer 1

Here你去吧。这应该会让您对如何在 React Native 中使用样式有一个很好的了解。示例代码也如下：

其中一个主要概念是 Flexbox for layout, so I would take a look at that. 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,

    }
});

你能帮我在 React Native 应用程序上进行布局吗？

Can you help me with layouts on react native app?

javascript

flexbox

reactjs

react-native