React 本机应用程序卡在白屏上，没有任何错误

Question

我正在学习 React Native，并试图构建一个应用程序。但是，该应用程序卡在白屏上，不显示任何内容，也不给出任何错误。这段代码将从数组中渲染一个平面列表，并在右侧有一个删除滑动按钮。但我没有收到任何错误。

消息.js

import React, { useState } from 'react'
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  SafeAreaView,
  StatusBar,
  ItemSeparatorComponent,
  Platform
} from 'react-native'

import ListItem from '../components/ListItem'
import ListItemSeparator from '../components/ListItemSeparator'
import DeleteSwipe from '../components/DeleteSwipe'
const messages = [
  {
    id: 1,
    name: 'T1',
    description: 'D2',
    image: require('../assets/mosh.jpg')
  },
  {
    id: 2,
    name: 'T2',
    description: 'D2',
    image: require('../assets/mosh.jpg')
  },
  {
    id: 3,
    name: 'T3',
    description: 'D3',
    image: require('../assets/mosh.jpg')
  },
  {
    id: 4,
    name: 'T4',
    description: 'D4',
    image: require('../assets/mosh.jpg')
  }
]
export default function Message () {
  const [messages, setMessage] = useState(messages)

  const handleDelete = messages => {
    const newMessages = messages.filter(m => m.id != messages.id)
    setMessage(newMessages)
  }

  return (
    <SafeAreaView style={styles.screen}>
      <FlatList
        data={messages}
        keyExtractor={messages => messages.id.toString()}
        renderItem={({ item }) => (
          <ListItem
            name={item.name}
            description={item.description}
            image={item.image}
            onPress={() => console.log('touched', item)}
            renderRightActions={() => (
              <DeleteSwipe onPress={() => handleDelete(item)} />
            )}
          />
        )}
        ItemSeparatorComponent={ListItemSeparator}
      />

      <FlatList />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  screen: {
    padding: Platform.OS === 'android' ? StatusBar.currentHeight : 0
  }
})

删除Swipe.js

import React from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import Swipeable from 'react-native-gesture-handler/Swipeable'
import { AntDesign } from '@expo/vector-icons'

const DeleteSwipe = props => {
  const { renderRightActions } = props
  return (
    <TouchableWithoutFeedback onPress={console.log('delete it')}>
      <View style={styles.container}>
        <AntDesign name='delete' size={24} color='white' />
      </View>
    </TouchableWithoutFeedback>
  )
}
const styles = StyleSheet.create({
  container: {
    width: 70,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff5252'
  }
})

export default DeleteSwipe

Answer 1

1. 如果是调试器问题，请在 React Native 调试器正在运行时重新启动调试器。并再次开始
2. 或者这可能是一个弹性盒问题，尝试添加或删除display: flex此flex:1和父项。
3. 或者可能是组件太小，从开发菜单打开检查器并检查屏幕中的组件名称。