React-native flatlist不呈现？

2 回答

• 0

  我'm thinking what'正在进行的是你没有将 FlatList 包裹在 flex: 1 中设置了 flex: 1 . 此外，您可以使用 uid 作为键，而不是在对象数据中设置 key

  演示

  https://snack.expo.io/@anonymoussb/so53688423

  import * as React from 'react';
  import { Text, View, StyleSheet, Button, FlatList } from 'react-native';
  
  class ChatUserCard extends React.Component {
    render() {
      return (
        <View style={styles.cardStyle}> 
            <Text style={styles.itemStyle}>{this.props.username}</Text>
            <Button style={styles.buttonStyle}
                    title='Chat'
                    onPress={this.startChat} />
        </View>
      )
    }
  }
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        users: [
          { key: 123, uid: 123, username: 'taco' },
          { key: 456, uid: 456, username: 'cat' }
        ]
      }
    }
    render() {
      return (
        <View style={styles.container}>
          <FlatList style={{flex:1, backgroundColor:'red'}}
             data = {this.state.users}
             keyExtractor={item => item.key.toString()}
             renderItem={({item}) => {
                 return (
                     <ChatUserCard key={item.uid} username={item.username} />
                 )
             }}
          />
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1
    },
  });
  

  回复于 2024-04-24T17:02:49+08:00
• 0

  尝试在平面列表下方的视图中添加注释，并从平面列表中的样式中删除flex 1 . 尝试检查它是否与样式相关

  回复于 2024-04-24T17:02:49+08:00