Question

我有一个可显示我餐厅食物的清单。我有一个购物篮，上面显示了食品的数量和总成本。现在我想知道如何确定篮子购买在固定清单上的位置。

注意：平面清单上的购物篮是一个小图标，显示食品的数量和总费用。

谢谢。

Answer 1

如果您正在寻找“浮动操作按钮”（如带有Flatlist的解决方案，如下面的示例图片所示），请找到full code here。

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

Answer 2

像这样：How to re-render flatlist?

好的。我刚刚发现，如果我们希望FlatList知道数据属性之外的数据更改，我们需要将其设置为extraData，所以我现在就这样：

 let conf={
    // MY FIREBASE CONFIG 
};
var secondaryApp = firebase.initializeApp(conf, "secondary");
secondaryApp.auth()
  .createUserWithEmailAndPassword(this.staffAddForm.value.email,this.staffAddForm.value.phone).
  then(function(firebaseUser) {
    console.log("User " + firebaseUser.user.uid + " created successfully!");
    //I don't know if the next statement is necessary 
    secondaryApp.auth().signOut();
  });

请参阅：https://facebook.github.io/react-native/docs/flatlist#extradata

Answer 3

您应该执行以下操作：

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

如何在React Native中固定元素

3 个答案: