React native 如何在react native中固定元素

我有一份显示我餐馆食物的平面清单。我有一个购物篮，上面显示了食物的数量和总成本。现在，我想知道如何确定篮子买入在平面列表中的位置

注意：平面列表上的购物篮是一个小图标，显示食品的数量和总成本

---

提前谢谢。

您应该这样做：

//MyComponent.js

import { FlatList, View, ScrollView } from 'react-native';

export default class MyComponent extends Component {
    renderFlatlist() {
        return <FlatList data={...} />;
    }

    renderBasket() {
        return (
            <View>
                //Your basket
            </View>
        );
    }


    render() {
        return (
            <View>
                <ScrollView>
                    {this.renderFlatlist()}
                </ScrollView>
                <View>
                    {this.renderBasket()}
                </View>
            </View>
        )
    }
}

//MyComponent.js
从“react native”导入{FlatList，View，ScrollView}；
导出默认类MyComponent扩展组件{
renderFlatlist（）{
回来
}
renderBasket（）{
返回(
//你的篮子
);
}
render（）{
返回(
{this.renderFlatlist（）}
{this.renderBasket（）}
)
}
}

如果您正在寻找类似浮动操作按钮的解决方案，如下图所示，请查找

名称：{item.Name}
年龄：{item.Age}
}
/>
警报（'FAB clicked'）}
风格={{
位置：'绝对'，
宽度：56，
身高：56，
对齐项目：“居中”，
为内容辩护：“中心”，
右:20,，
底数：20，
背景颜色：“#03A9F4”，
边界半径：30，
立面图：8
}}>
+

css不起作用吗？我认为如果你想修复它，你应该把购物篮放在平面列表之外。另外，正如@PriyeshKumar所建议的，uou可以使用style={{position:'absolute'}}如果您发布示例代码，或者发布一些关于您当前问题是什么以及应该是什么样子的图片，那么会更容易提供帮助。有时，您的代码中缺少一些简单的东西，或者一些很难找到或尝试的东西。通常情况下，如果您提供此服务，这里的社区工作得更快。干杯

<FlatList
  data={data}
  renderItem={({ item }) => <View style={styles.list}>
  <Text>Name : {item.name}</Text>
  <Text>Age : {item.age}</Text>
  </View>}
/>

<TouchableOpacity onPress={() => alert('FAB clicked')} 
 style={{
 position: 'absolute',
 width: 56,
 height: 56,
 alignItems: 'center',
 justifyContent: 'center',
 right: 20,
 bottom: 20,
 backgroundColor: '#03A9F4',
 borderRadius: 30,
 elevation: 8
 }}>
  <Text style={{ fontSize: 40,color: 'white'}}>+</Text>
</TouchableOpacity>