仅在手机上出现Expo错误：始终不变：必须在 component 中呈现文本字符串>

Question

我正在尝试使用上下文提供程序创建一个简单的应用程序，当使用Expo应用程序在手机上运行该应用程序时，会引发此照片中的错误

这是我的app.js文件：

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IndexScreen from "./src/screens/IndexScreen";
import {BlogProvider} from "./src/context/BlogContext";

const navigator = createStackNavigator({
  Index: IndexScreen
}, {
  initialRouteName: 'Index',
  defaultNavigationOptions: {
    title: 'Blog List'
  }
});
const App = createAppContainer(navigator);

export default () => {
  return <BlogProvider><App/></BlogProvider>;
}

和blogContext.js文件：

import React, {useReducer} from 'react';

const BlogContext = React.createContext();
const reducer = (state, action) => {
    switch (action.type) {
        case 'add':
            return [...state, `Blog post #${state.length + 1}`]
        default:
            return state;
    }

}
export const BlogProvider = ({children}) => {
    const [state, dispatch] = useReducer(reducer,[]);
    const addBlogPost = () => {
       dispatch({type: 'add'})
    }
    return <BlogContext.Provider value={{data: state, addBlogPosts: addBlogPost}}> {children} </BlogContext.Provider>
}
export default BlogContext;

我仅在移动设备上看到此错误，在浏览器中打开应用程序时它没有显示任何错误

Answer 1

也许您可以尝试用Text标签包裹孩子？

喜欢这个：

import {Text} from "react-native";
...
 return <BlogContext.Provider value={{data: state, addBlogPosts: addBlogPost}}>
           <Text>{children}</Text>
        </BlogContext.Provider>

因为在大多数情况下，没有string标签也无法将纯Text放在其他位置。