React Native 如何在 Flatlist 中添加按钮？

Question

如何在平面列表中添加一个按钮，每当我尝试添加一个按钮时，我就会在平面列表中获得多个按钮。

我只想要一个可以使用平面列表滚动的按钮。

如果我在平面列表之外添加一个按钮，那么它不会滚动，它会固定在平面列表下方，只有平面列表数据滚动，但按钮不会随着平面列表滚动。 我该如何解决这个问题？ 非常感谢您的支持。

import React, { useState, useEffect } from 'react';
import {View, Button, Text, FlatList, StyleSheet, Pressable, TouchableOpacity} from 'react-native'
import {firebase} from '../config';

const Testing = ({ navigation }) =>{
    const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('testing');
  useEffect(() => {
        todoRef.onSnapshot(
            querySnapshot => {
                const users = []
                querySnapshot.forEach((doc) => {
                    const { one, two, three, four, five
              
                    } = doc.data()
                    users.push({
                        id: doc.id,
                        one, two, three, four, five
                      
                    })
                })
                setUsers(users)
            }
        )
    }, [])
return (
<View style={{ flex:1,}}>
   <FlatList 
  style={{height: '100%'}}
  data={users}
  numColumns={1}
  renderItem={({item}) => (
    <Pressable>

<View>
  <View>
    <Text style={[styles.card, styles.surah]}>{item.one}</Text>

    <Text style={styles.card}>{item.two}</Text>
    <Text style={styles.text}>{item.three}</Text>

    <Text style={styles.cardTwo}>{item.four}</Text>
    <Text style={styles.text}>{item.five}</Text>
</View>
  

         </View>
   
//  I tried to add here button but it's not worked 
    </Pressable>
     )}/>
  //  I also tried to add here button but it's not worked 
    </View>
    );}
    export default Testing;

Answer 1

您可以借助 renderItem function 的 index 参数来实现这一点。

renderItem={({item, index}) => (
 
   <View>
      <View>
        <Text style={[styles.card, styles.surah]}>{item.one}</Text>
        <Text style={styles.card}>{item.two}</Text>
        <Text style={styles.text}>{item.three}</Text>
        <Text style={styles.cardTwo}>{item.four}</Text>
        <Text style={styles.text}>{item.five}</Text>
      </View>
      { 
        index === users.length - 1 && <Pressable onPress={...}>...</Pressable>
      }
   </View>
)}

上面添加了一个组件，在本例中为最后一项末尾的 Pressable。 如果您希望最后一个项目是可按压的，那么您可以使用相同的模式来实现这一点，但通过将最后一个组件包装在可按压的内部。

const InnerComponent = () => {
 return <View>
        <Text style={[styles.card, styles.surah]}>{item.one}</Text>
        <Text style={styles.card}>{item.two}</Text>
        <Text style={styles.text}>{item.three}</Text>
        <Text style={styles.cardTwo}>{item.four}</Text>
        <Text style={styles.text}>{item.five}</Text>
      </View>
}
...
renderItem={({item, index}) => (
 
   <View>
      { 
        index === users.length - 1 ? <Pressable onPress={...}>
          <InnerComponent />
       </Pressable> : <InnerComponent />
      }
   </View>
)}