浮动按钮的位置随反应本机中平面列表中元素的数量而变化

问题描述

我有一个平面列表，需要在其下方放置一个自定义浮动操作按钮。我不希望平面列表扩展到屏幕的底部。相反，我希望Flatlist窗口是固定大小并且可以滚动以容纳更多行。在列表下方，我要放置晶圆厂的空白空间。要固定按钮的位置，我已经使用

position: "absolute"

以及bottom和right属性。但是，晶圆厂的位置不断变化，具体取决于平板清单中的项目数量。此外，尽管我已设置，但最初显示在单位列表中的行数一直在变化

intialNumToRender ={3}

单位列表

在这段代码中，我尝试删除Flatlist中的marginTop，marginBottom等以及包含它的视图，但这没有帮助

 <View style={{ marginBottom: "20%" }}>
          <FlatList
            style={{ marginTop: "15%" }}
            //  maxToRenderPerBatch={3}
            data={someArray}
            initialNumToRender={3}
            keyExtractor={(item,index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <View
                  style={{
                    justifyContent: "space-evenly",// justifyContent: "center",//marginBottom: "8%",marginLeft: "3%",flexDirection: "row",flex: 1,paddingBottom: "3%",paddingRight: "42%",}}
                >
                  <View
                    style={{
                      flex: 0.4,//justifyContent: "flex-start",paddingTop: "5%",marginRight: "5%",}}
                  >
                    <Avatar
                      rounded
                      source={someImage}
                      avatarStyle={{ borderWidth: 2,borderColor: "blue" }}
                      size={50}
                    />
                  </View>
                  <View
                    style={{
                      flex: 0.6,// justifyContent: "flex-start",// paddingTop: "5%",// marginRight: "38%",// marginLeft: "%",}}
                  >
                    <PiggyBankBadge
                      text={item.name}
                      someAmount={35}
                      Saved={35}
                    />
                  </View>
                </View>
              );
            }}
          />
        </View>
        {/* Floating Button*/}
        <FloatingActionButton
          onPress={() => navigation.navigate("NewScreen")}
        />

FAB

在这里，我尝试为底部和右侧分配绝对值而不是百分比，但这也无济于事。

export default function FloatingActionButton(props) {
  return (
    <TouchableOpacity onPress={props.onPress} style={styles.button}>
      <View style={styles.icon}>
        <MaterialCommunityIcons name="plus" color="#fff" size={35} />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    position: "absolute",bottom: "-3%",right: "5%",backgroundColor: "blue",height: 60,width: 60,borderRadius: 50,},icon: {
    alignSelf: "center",paddingTop: 14,paddingLeft: 1,});

任何人都可以帮助我解决这些问题，到目前为止，StackOverflow上其他类似的帖子都没有被证明是有用的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

floating-action-button position react-native react-native-flatlist