Стайлинг реагирует на родные компоненты - PullRequest
Новая
       8

Стайлинг реагирует на родные компоненты

0 голосов
/ 12 ноября 2018

Когда я запускаю следующий код на моем телефоне 

render() {
    return [
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Search />
      </View>,
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <FlatList
          style={styles.list}
          data={this.state.products}
          renderItem={({ item }) => <ProductCard product={item} />}
          keyExtractor={item => item.id}
        />
      </View>,
    ];
  }

Я получаю разделение экрана между компонентами поиска и Productcard. Такое ощущение, что каждый из них занимает по умолчанию 50% экрана, но я хочу, чтобы они шли один за другим.

Компонент поиска - просто фиктивный текст: 

export default function Search() {
  return <Text>Hej</Text>;
}

Но когда я снимаю вокруг них, это выглядит хорошо.

Ответы [ 3 ]

0 голосов
/ 12 ноября 2018

Полагаю, вы хотите, чтобы они прокручивались, если это так, вы должны обернуть их вокруг <ScrollView>.

вроде так, 

render() {
    return (
    <ScrollView>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Search />
      </View>,
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <FlatList
          style={styles.list}
          data={this.state.products}
          renderItem={({ item }) => <ProductCard product={item} />}
          keyExtractor={item => item.id}
        />
      </View>
    </ScrollView>
    );
  }

А во втором случае, если вы хотите, чтобы прокручивалась только вторая половина, просто оберните это представление внутри тега <ScrollView>.

0 голосов
/ 13 ноября 2018

Спасибо за помощь, это дало мне верное направление, но я заработал это по коду ниже: 

     <View>
        <Search />,
        <FlatList
          style={styles.list}
          data={this.state.products}
          renderItem={({ item }) => <ProductCard product={item} />}
          keyExtractor={item => item.id}
        />
        ,
      </View>
0 голосов
/ 12 ноября 2018

вы ищете что-то подобное? 

render() {
    return(
        <View style={{flex: 1, flexDirection: 'column'}}>
          <View style={{flexDirection: 'row' }}>
            <Search />
          </View>,
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <FlatList
              style={styles.list}
              data={this.state.products}
              renderItem={({ item }) => <ProductCard product={item} />}
              keyExtractor={item => item.id}
            />
          </View>
        </View>
    );
 }
...