Question

在我的React-Native项目中，我安装了以下版本的react-navigation：

npm install react-navigation@^1.0.0-beta.11

然后运行命令：

npm安装

所有这些安装之后，我创建了一个名为 WelcomeScreen.js 的类，下面是为此提供的代码-

WelcomeScreen.js

import React, { Component } from "react";
import {
    View,
    StyleSheet,
    Button
} from "react-native";

class WelcomeScreen extends Component {

    static navigationOptions = {
        header: 'none'
    }

    render() {
        return (
            <View style={styles.container}>
                <Button title="Log in" onPress={() => this.props.navigation.navigate('LoginScreen')}/>
                <Button title="Sign Up" onPress={() => this.props.navigation.navigate('SignUpScreen')}/>
            </View>
        )
    }
}
export default WelcomeScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

此后，我已经在我的 App.js 文件中路由了该类。这是下面给出的代码：

App.js

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

import { StackNavigator } from 'react-navigation'
import WelcomeScreen from './screens/WelcomeScreen'
export default class App extends React.Component {
  render() {
    return (
      <AppStackNavigator/>
    );
  }
}

const AppStackNavigator = new StackNavigator({
  WelcomeScreen: { screen: WelcomeScreen }
})


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

然后，在运行我的项目后，我一直收到此错误：

始终不变：必须在组件内呈现文本字符串

Invarient violation:Text strings must be rendered within a component

我不明白为什么会收到此错误？我尝试了以下解决方案-

Invariant Violation: Text strings must be rendered within a <Text> component

https://github.com/facebook/react-native/issues/20084

他们都不对我有帮助。因此，如果有人帮我解决这个问题，那就太好了。

Answer 1

您在标题中使用了错误的值

static navigationOptions = {
    header: "none"        
};

将"none"替换为null

static navigationOptions = {
        header: null        
};

Answer 2

    const AppStackNavigator = new StackNavigator({
  WelcomeScreen: { screen: WelcomeScreen }
})


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }**,**
});

这是逗号吗？

Answer 3

我会考虑使用React的最新导航包react-navigation-stack（当前使用2.0 alpha-link）。

您将像以前的react-navigation堆栈导航器一样实现此功能。

import React from 'react'
// ...
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'

const HomeStack = createStackNavigator(
  { HomeScreen, AboutScreen },
  { initialRouteName: "HomeScreen" }
)

HomeStack.navigationOptions = {
  headerShown: false, // a more concise option, to avoid future deprecation.
}
// ... continues in next code block

也不要忘记将应用程序包装在react-navigation AppContainer中。

// ...
const AppNav = createAppContainer(HomeStack)

export default AppNav

当然，如果您要在其他屏幕中修改navigationOptions，则只需在该屏幕组件中附加其他选项：

class HomeScreen extends React.Component {
    static navigationOptions = {
        headerShow: false        
    }
    render() { 
        return (<View><Text>Welcome home.</Text></View>)
    }
}

如上所示，我们现在可以使用导航选项： headerShown：false 。

有了这个新软件包，您将为React导航软件包的未来迭代准备应用程序。

注意；不选择样式。

如何解决不变式冲突：必须在React Native的<text>组件中呈现文本字符串？

3 个答案: