React Native - маржа в промежуточных элементах - PullRequest
Новая
       46

React Native - маржа в промежуточных элементах

0 голосов
/ 07 мая 2020

Я хотел бы добавить пробел между заголовком и панелью поиска, добавив стили в мое приложение. js файл.

Текущий снимок экрана моего приложения

Как бы я хотел, чтобы это выглядело

Я пробовал следующее, но не сработало

  • Исключая styles.container в родительском представлении.
  • И многие другие мелкие изменения, которые не повлияли на мою проблему, также искали и ничего не нашли по моей проблеме.

Приложение. js

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Search } from './Components/Searchbar';
import { Listt } from './Components/List'

const App = () => {

  return (
    <View style={styles.container}>
      <Text style={styles.text}>My App</Text>
      <Search style={styles.search}/>
      <Listt style={styles.list}/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
    color:'red',
    fontSize: 35,
    marginTop: 20,
  },
  search: {
    marginTop: 500,
  },
  list: {
    marginTop: 300,
  }
});

export default App;

Панель поиска. js

import * as React from 'react';
import { Searchbar } from 'react-native-paper';

export class Search extends React.Component {
  state = {
    firstQuery: '',
  };

  render() {
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => { this.setState({ firstQuery: query }); }}
        value={firstQuery}
      />
    );
  }
}

1 Ответ

0 голосов
/ 08 мая 2020

Есть несколько способов получить желаемый результат. Я предполагаю, что вы просто хотите, чтобы компонент поиска имел marginTop: 500.

Это общий шаблон. Однако одного этого будет недостаточно. 

<Search style={styles.search}/>

Причина в том, что пользовательские компоненты не используют свойства стиля по умолчанию , если только они не созданы для этого.

Чтобы ваш компонент использовал опору стиля, вам необходимо:

  1. Доступ к указанному стилю изнутри этого компонента
  2. Передать его родному компонент (например, View) или компонент, который принимает свойство стиля. В вашем случае это последнее.

Это пример настраиваемого компонента, который принимает опору стиля. 

export class Example extends React.Component {
  render() {
    const style = this.props.style;
    return (
      <View style={this.props}>
        <Text>Here is an example</Text>
      </View>
    );
  }
}

И он называется так: 

<Example style={styles.somestyle} />

Согласно React В документации Native Paper компонент Searchbar принимает опору стиля. https://callstack.github.io/react-native-paper/searchbar.html#style

Это означает, что вы должны иметь возможность передавать ему стиль, не помещая компонент в View.

...