Question

所以我使用的是React Native Section List，以下是我的ListEmptyContent代码

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail_product);
        TextView resulttext = (TextView) findViewById(R.id.hasiltext);
        if(getTntent()!=null && getIntent().hasExtra("abb")){
        String text = getIntent().getStringExtra("abb"); 
        resulttext.setText(text);
    }
}

但是当渲染EmptyTemplate时，它会在Top上渲染而不会拉伸到全屏。

Answer 1

这对我有用，将flexGrow: 1应用于contentContainerStyle

<FlatList
    data={this.props.operations}
    contentContainerStyle={{ flexGrow: 1 }}
    ListEmptyComponent={<EmptyPlaceHolder />}
    renderItem={this.renderOperationItem} />

Answer 2

对我来说有效的是向 contentContainerStyle 添加一些样式：

contentContainerStyle={{ flex: 1, justifyContent: 'center' }}

我这边的 SectionList 完整设置是：

<SectionList
    showsVerticalScrollIndicator={false}
    sections={filteredData}
    keyExtractor={(item) => item.id.toString()}
    renderItem={renderItem}
    initialNumToRender={15}
    contentContainerStyle={{ flex: 1, justifyContent: 'center' }}
    ListEmptyComponent={() => (
        <EmptyListComponent
            icon={<Document />}
            message={'Your roster is empty'}
        />
    )}
/>

Answer 3

我通过以下简单技巧成功了

import { Dimensions } from "react-native";
const SCREEN_HEIGHT = Dimensions.get("window").height;

比我声明的是空组件

_listEmptyComponent = () => {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          height: SCREEN_HEIGHT , //responsible for 100% height
          backgroundColor: "#ddd"
        }}
      >
        <Text
          style={{
            justifyContent: "center",
            alignItems: "center",
            fontSize: 20
          }}
        >
          No Contracts Found
        </Text>
      </View>
    );

最后Flatlist看起来像：

          <FlatList
            extraData={this.props.contracts}
            data={this.props.contracts}
            ListEmptyComponent={this._listEmptyComponent.bind(this)}
            renderItem={({ item }) => (
              <Text>{item.contractName}>
              <Text/>
            )}
            keyExtractor={(item, index) => item.id}
          />

ListEmptyComponent未在React Native Section List中使用flex 1全屏显示

3 个答案: