3515

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

Julia

Не проходят три проверки

Each of three child elements should have flex property set to 1.
The first child View should have background color set to rgb(255, 198, 0).

The third child View should have background color set to #1DBEBE.

import React from "react";
import { View, StyleSheet, Text } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[styles.line, styles.header]}>
        <Text>Header</Text>
      </View>
      <View style={styles.line}>
        <View style={styles.column1}>
          <Text>1</Text>
        </View>
        <View style={styles.column2}>
          <Text>2</Text>
        </View>
      </View>
      <View style={[styles.line, styles.footer]}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  header: { backgroundColor: "rgb(255,198,0)" },
  footer: { backgroundColor: "#1DBEBE" },
  line: {
    flex: 1,
    width: "100%",
    flexDirection: "row",
    height: 50,
    marginBottom: 10,
  },
  column1: {
    flex: 1,
    backgroundColor: "#38287F",
    marginHorizontal: 5,
  },
  column2: {
    flex: 2,
    backgroundColor: "rgb(29,104,208)",
    marginHorizontal: 5,
  },
});

Coderslang_Master

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ backgroundColor: 'rgb(255, 198, 0)', flex: 1 }}>
        <Text>Header</Text>
      </View>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 1, backgroundColor: '#38287F' }}>
          <Text>1</Text>
        </View>
        <View style={{ flex: 2, backgroundColor: 'rgb(29,104,208)' }}>
          <Text>2</Text>
        </View>
      </View>
      <View style={{ backgroundColor: '#1DBEBE', flex: 1 }}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}