用 Flatlist 反应原生 inputText答案

【问题标题】：React Native inputText with Flatlist用 Flatlist 反应原生 inputText
【发布时间】：2021-04-27 16:55:24
【问题描述】：

我是 react-native 的新手。下面这个组件应该呈现用户发布的 cmets，我想从 react-native 添加一个 inputText 组件以允许用户发表评论，但不知道我应该将它放在下面的代码中的哪个位置。

import React, { useState, useEffect } from 'react';
import { useNavigation } from "@react-navigation/native";
import Icon from 'react-native-vector-icons/AntDesign';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
  FlatList,
  Button,
  TextInput
} from 'react-native';
import parseDate from "../utils/parseDate";
import * as API from "../api/api"

export default function CommentList({ ride }) {
  const [text, setText] = React.useState("");
  const [commentsData, setComments] = useState([]);
  const navigation = useNavigation();

  useEffect(() => {
    API.getCommentsByRideId(ride.ride_id).then((comments) => {
      setComments(comments)
    })
  }, [ride.ride_id])


  deleteComment = (comment_id) => {
    // useEffect(() => {
    API.deleteCommentsByCommentId(comment_id).then(() => {
      const updatedComments = list.filter((item) => item.comment_id !== comment_id);
      setComments(updatedComments)
    })
    // }, [comment_id])
  }
  //deletes on refresh only 


  addComment = (newComment, ride_id) => {
    API.postCommentByRideId(newComment, ride_id).then(() => {
      setComments(newComment)
    })
  }

  return (
    <FlatList
      style={styles.root}
      data={commentsData}
      ItemSeparatorComponent={() => {
        return (
          <View style={styles.separator} />
        )
      }}
      keyExtractor={(item) => {
        return item.author;
      }}
      renderItem={(item) => {
        const comment = item.item;
        return (
          <View style={styles.container}>
            <TouchableOpacity onPress={() => navigation.navigate("UserProfile", { username: item.author })}>
              {/* <Image style={styles.image} source={{ uri: comment.avatar_url }} /> */}
            </TouchableOpacity>
            <View style={styles.content}>
              <View style={styles.contentHeader}>
                <Text style={styles.name}>{comment.author}</Text>
                <Text style={styles.time}>
                  {parseDate(comment.created_at)}
                  {comment.votes}
                </Text>
              </View>
              <Text rkType='primary3 mediumLine'>{comment.body}</Text>
              {/* <Text style={styles.time}> Likes: {comment.votes}</Text> */}
              <TouchableOpacity onPress={() => deleteComment(comment.comment_id)}>
                <Icon name="delete" size={20} color="#e33057" />
              </TouchableOpacity>
            </View>
          </View>
        );
      }} />
  );
}

这是我想添加以允许用户发表评论的 inputText。

    <TextInput
              value={text}
              placeholder="write..."
              onChangeText={text => setText(text)}
              onSubmitEditing={() => addcomment(text, ride.ride_id)}
            />

【问题讨论】：

标签： react-native react-hooks react-native-flatlist

【解决方案1】：

如果您想将其添加到屏幕底部的固定位置，您可以这样做

<View style={{flex : 1}}>
  <Flatlist
    contentContainerStyle={{paddingBottom: 50}}
    .../>
  <View style={{position : 'absolute', bottom : 0, width : '100%', height : 50}}>
    //you input here
  </View>
</View>

或者如果你想添加它flatlist的最后一项你可以使用ListFooterComponent

<FlatList
  ListFooterComponent={<Input/>}
  .../>
</FlatList>

【讨论】：