Question

我对React Native感到新的一周，并且我试图在FlatList的底部放置一个按钮。

我已经让FlatList正常工作了，但如果我把我的按钮放在下面（大大简化的）伪代码中，那么它就会出现在FlatList中所有项目的底部。

我想要的是按钮始终位于屏幕的底部，并且FlatList可以在其上方滚动。

我想我可能需要一个包装容器，然后在FlatList和Button上设置flex，但我无法到达那里。

<Container>

  <Content>
      <FlatList
          ...working FlatList goes here...
      />

      <Button block onPress={() => Actions.filters()}>
        <Text>Filter results</Text>
    </Button>

  </Content>

为了简洁起见，我从FlatList中取出了所有属性，但它起作用而不是问题。我只想把那个按钮贴在屏幕的底部，让它留在那里。

最好的方法是什么？

Answer 1

FlatList现在提供ListFooterComponent

https://facebook.github.io/react-native/docs/flatlist#listfootercomponent

Answer 2

您可以为FlatList使用一个视图，为Button使用一个视图，如下所示：

<Container>

    <Content>
        <View style={{flex: 3}}>
            <FlatList
                ...working FlatList goes here...
            />
        </View>
        <View style={{flex: 1}}
            <Button block onPress={() => Actions.filters()}>
                <Text>Filter results</Text>
            </Button>
        </View>

    </Content>

React Native FlatList - 如何为下面的按钮留出空间？

2 个答案: