Javascript React-native和React-navigation返回类型错误：null不是对象

我不知道我创建的react本机应用程序有什么问题，它返回了上述错误，我不能说这是代码的问题，但我感觉错误来自react导航。我要做的是检查提要的数量是否大于零（0），如果大于零，则显示内容，如果不大于零，则不显示已保存的提要

这就是我所犯的错误

React本机返回typeerror:null不是对象（正在计算feed.length）

反应本机版本：最新版本

反应版本：最新版本

反应导航版本：2.0.1

这就是代码

import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TouchableWithoutFeedback,
  ScrollView
} from 'react-native'

import CenterMessage from '../components/CenterMessage'

import { colors } from '../theme'

export default class Feeds extends React.Component {
  static navigationOptions = {
    title: 'Feeds',
    headerTitleStyle: {
      color: 'white',
      fontSize: 20,
      fontWeight: '400'
    }
  }
  navigate = (item) => {
    this.props.navigation.navigate('Feed', { feed: item })
  }
  render() {
    const { screenProps: { feeds } } = this.props
    return (
      <ScrollView  contentContainerStyle={[!feeds.length && { flex: 1 }]}>// error here !feeds.length
        <View style={[!feeds.length && { justifyContent: 'center', flex: 1 }]}>// error here !feeds.length
          {
            !feeds.length && <CenterMessage message='No saved feeds!' />// error here !feeds.length
          }
          {
            feeds.map((item, index) => (
              <TouchableWithoutFeedback onPress={() => this.navigate(item)} key={index} >
                <View style={styles.feedContainer}>
                  <Text style={styles.feed}>{item.feed}</Text>
                  <Text style={styles.country}>{item.country}</Text>
                </View>
              </TouchableWithoutFeedback>
            ))
          }
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  feedContainer: {
    padding: 10,
    borderBottomWidth: 2,
    borderBottomColor: colors.primary
  },
  feed: {
    fontSize: 20,
  },
  country: {
    color: 'rgba(0, 0, 0, .5)'
  },  
})

从“React”导入React
进口{
看法
文本
样式表，
可触摸且无反馈，
卷轴视图
}从“反应本机”
从“../components/CenterMessage”导入CenterMessage
从“../theme”导入{colors}
导出默认类提要扩展React.Component{
静态导航选项={
标题：“提要”，
头饰样式：{
颜色：'白色'，
尺寸：20，
重量：'400'
}
}
导航=（项目）=>{
this.props.navigation.navigate（'Feed'，{Feed:item}）
}
render（）{
const{screenProps:{feeds}}=this.props
返回(
//这里出错！feeds.length
//这里出错！feeds.length
{
！feeds.length&&//此处出错！feeds.length
}
{
feeds.map（（项目，索引）=>(
this.navigate（item）}key={index}>
{item.feed}
{项目.国家}
))
}
)
}
}
const styles=StyleSheet.create({
饲料容器：{
填充：10，
边界宽度：2，
borderBottomColor:colors.primary
},
提要：{
尺寸：20，
},
国家：{
颜色：“rgba（0,0,0,5）”
},  
})

这是app.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, AsyncStorage } from "react-native";
import Tabs from "./src";

const key = "state";

const initialState = [{
  feed: 'Alcohol kills some students sometimes ago',
  title: 'Alcohol',
  id: 0,
  replies: []
},
{
  feed: 'Tokyo',
  title: 'Cigarette',
  id: 1,
  replies: []
}]
export default class App extends Component {
  state = {
    feeds: []
  };
  
  async componentDidMount() {
    try {
      let feeds = await AsyncStorage.getItem(key);
      feeds = JSON.parse(feeds);
      this.setState({ feeds });
    } catch (e) {
      console.log("error from AsyncStorage: ", e);
    }
  }

  addFeed = (feed) => {
    const feeds = this.state.feeds;
    feeds.push(feed);
    this.setState({ feeds });
    AsyncStorage.setItem(key, JSON.stringify(feeds))
      .then(() => console.log("storage updated!"))
      .catch(e => console.log("e: ", e));
  };

  addReply = (Reply, feed) => {
    const index = this.state.feeds.findIndex(item => {
      return item.id === feed.id;
    });
    const chosenFeed = this.state.feeds[index];
    chosenFeed.replies.push(Reply);
    const feeds = [
      ...this.state.feeds.slice(0, index),
      chosenFeed,
      ...this.state.feeds.slice(index + 1)
    ];
    this.setState(
      {
        feeds
      },
      () => {
        AsyncStorage.setItem(key, JSON.stringify(feeds))
          .then(() => console.log("storage updated!"))
          .catch(e => console.log("e: ", e));
      }
    );
  };

  render() {
    return (
      <Tabs
        screenProps={{
          feeds: this.state.feeds,
          addFeed: this.addFeed,
          addReply: this.addReply
        }}
      />
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{平台、样式表、文本、视图、异步存储}；
从“/src”导入选项卡；
const key=“state”；
常量初始状态=[{
feed:“酒精有时会杀死一些学生”，
标题：“酒精”，
id:0，
答复：[]
},
{
提要：“东京”，
标题:"香烟",，
id:1，
答复：[]
}]
导出默认类应用程序扩展组件{
状态={
订阅源：[]
};
异步组件didmount（）{
试一试{
let feed=wait AsyncStorage.getItem（键）；
feed=JSON.parse（feed）；
this.setState（{feeds}）；
}捕获（e）{
log（“异步存储错误：”，e）；
}
}
addFeed=（feed）=>{
const feeds=this.state.feeds；
feed.推送（feed）；
this.setState（{feeds}）；
AsyncStorage.setItem（key，JSON.stringify（提要））
。然后（（）=>console.log（“存储已更新！”）
.catch（e=>console.log（“e:，e））；
};
addReply=（回复，提要）=>{
const index=this.state.feeds.findIndex（项=>{
return item.id==feed.id；
});
const chosenFeed=this.state.feed[index]；
chosenFeed.Reply.push（Reply）；
常数馈送=[
…this.state.feeds.slice（0，索引），
chosenFeed，
…this.state.feeds.slice（索引+1）
];
这是我的国家(
{
喂养
},
() => {
AsyncStorage.setItem（key，JSON.stringify（提要））
。然后（（）=>console.log（“存储已更新！”）
.catch（e=>console.log（“e:，e））；
}
);
};
render（）{
返回(
);
}
}

---

是库没有正确链接或配置吗？

问题是您的

this.props.screenProps.feeds

参数为空。检查您是否正确地将

feeds

参数传递给组件

您可以控制台日志

this.props.screenProps

？它将显示什么？@MaksymBezruchko当我使用android模拟器时，我将在哪里执行控制台操作？您使用React本机调试器吗？