Question

当我在手机上运行以下代码

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>;
}

但是当我移开它们时，它看起来不错。

Answer 1

您是否正在寻找类似的东西？

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>
    );
 }

Answer 2

我想您想让它们滚动，如果需要的话，您必须将它们包裹在<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>标记内。

Answer 3

感谢您的帮助，它为我提供了正确的方向，但是我可以通过下面的代码来实现它：

     <View>
        <Search />,
        <FlatList
          style={styles.list}
          data={this.state.products}
          renderItem={({ item }) => <ProductCard product={item} />}
          keyExtractor={item => item.id}
        />
        ,
      </View>

样式会响应本机组件

3 个答案: