0

Я новичок, помогите разобраться : не отображается текст и кнопки при подключении файла из компонента. Основной файл:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Header from './components/Header';

export default function App() {
  
  return (
    
      <View>
        <Header/>
      </View>
   
  );
}



const styles = StyleSheet.create({
 
});

Подключаемый компонент:

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

export default function Header() {

  return (
    
      <View style = {styles.main}>
        <Text style = {styles.text}>Список дел</Text>
       
      </View>
   
  );
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 100,
    height: 100,
    backgroundColor: 'blue',
    justifyContent: 'center'
  },
  text: {
    flex: 1,
    fontSize: 18,
    color: 'red',
    textAlign: 'center',
    

  },
});

При этом синее поле из компонента отображается, если писать текст в основном файле, то также все работает.

1 ответ 1

0

Похоже, что дело в том, что у тебя не задана высота основному родителю - View в основном файле, в который вставляется Header. Если добавить этому View {flex: 1} и закомментировать некоторые стили у main и text, то текст и кнопка (которой нет у тебя в примере, но в свой я добавила) будут отображаться.

У меня основной файл получился такой:

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Header from './Components/Header';    

export default function App() {
  return (
    <View style={{flex: 1, borderWidth: 4, borderColor: 'red'}}>
      <Header />
    </View>
  );
}

const styles = StyleSheet.create({});

Отредактированный Header:

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

export default function Header() {
  return (
    <View style={styles.main}>
      <Text style={styles.text}>Список дел</Text>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  main: {
    // flex: 1,
    padding: 100,
    // width: 100,
    backgroundColor: 'blue',
    borderWidth: 5,
    borderColor: 'black',
  },
  text: {
    // flex: 1,
    fontSize: 18,
    color: 'red',
    textAlign: 'center',
  }
});

Для наглядности я добавила красную рамку основному View и черную - Header, мне кажется, так понятнее, что происходит.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.