你能帮我在react原生应用程序上进行布局吗

Can you help me with layouts on react native app?

本文关键字：程序上 应用程序 布局 应用 原生 react      更新时间：2023-09-26

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

开始吧。这应该会让你对如何在React Native中使用样式有一个很好的想法。示例代码如下：

https://rnplay.org/apps/W0vWoQ

其中一个主要概念是用于布局的Flexbox，所以我将对此进行研究。以下是造型的总体概述。

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,
    }
});
相关文章：