反应原生应用程序卡在白屏上，没有任何错误答案

【问题标题】：React native app stuck on white screen without any errors反应原生应用程序卡在白屏上，没有任何错误
【发布时间】：2021-03-13 00:10:00
【问题描述】：

我正在学习 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
  }
})

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

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

如果是调试器问题，如果 react native 调试器正在运行，请重新启动调试器。重新开始
或者可能是 flexbox 问题，尝试在此和父级上添加或删除 display: flex 和 flex:1。
或者可能是组件太小，从开发菜单打开检查器并检查屏幕中的组件名称。

【讨论】：

【解决方案2】：

将 onPress={console.log....} 更改为 onPress={() => console.log(... )}

但看来你想要的是 onPress={props.onPress}

【讨论】：