如何使用 react-navigation 更改屏幕（使用按钮）

Question

我是本机反应的新手，但过去几个小时我一直在研究如何使用按钮重定向到新活动，但无济于事。我当前的解决方案涉及我使用来自多个文件的 react-navigation，App.js 为其余页面创建 StackNavigator。但是，每当我按下 Initial.js 上的按钮时，什么都没有发生。

我在 Invariant Violation: The navigation prop is missing for this navigator 上按照 Damien Manson 的教程进行操作，但按钮仍然不起作用。我在调用我的按钮之前尝试引用 App，但是每当我尝试在模拟器上运行它时，它不会向我显示错误日志并且它永远不会加载。它会停留在“正在下载 JavaScript 包：100%”几分钟，直到模拟器本身崩溃。

这是我的 App.js

import Initial from './components/Initial'
import Statistics from './components/Statistics'

const RootStack = createStackNavigator({
  Default: {
    screen: Initial
  },
  Stats: {
    screen: Statistics
  }
});

const App = createAppContainer(RootStack);

export default App;

这是我的 Initial.js

import { StyleSheet, ImageBackground, Image, View, Text, Button } from 'react-native';
import { Font } from 'expo';

import App from '../App';

import {withNavigation} from 'react-navigation';
import Statistics from './Statistics';


export default class Initial extends React.Component {
    static navigationOptions = {header: null} 

    componentDidMount() {
        Font.loadAsync({'pt': require('../assets/fonts/pt.ttf')});
        Font.loadAsync({'Karla': require('../assets/fonts/Karla-Regular.ttf')});
        Font.loadAsync({'Space-Mono': require('../assets/fonts/SpaceMono-Regular.ttf')});
    }

    state = { fontLoaded: false};

    async componentDidMount() {
        await Font.loadAsync({'pt': require('../assets/fonts/pt.ttf'),});
        await Font.loadAsync({'Karla': require('../assets/fonts/Karla-Regular.ttf'),});
        await Font.loadAsync({'Space-Mono': require('../assets/fonts/SpaceMono-Regular.ttf'),});
        this.setState({fontLoaded: true});
    }

    render() {
        return (
            <ImageBackground
                source = {require('../assets/blue-bin.jpg')}
                style = {styles.container}>
                <View style = {styles.parentView}>
                    {this.state.fontLoaded ? (<Text style={styles.logoText}>!arbitrary</Text>) : null}
                    <Image source = {require('../assets/sadparrot.gif')} style = {styles.logo}/>
                    <Text style = {styles.textBox}>With its easily navigatible interface, the Chicago-based app, !arbitrary, aims to educate the masses about recyclable items, while emphasizing the importance of being sustainable.</Text>
                    <View style = {styles.redirect}>
                        <Button
                            title="Start"
                            onPress={() => this.props.navigation.navigate('Statistics')}
                         /> 
                    </View>    
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      width: '100%',
      height: '100%',
    },
    parentView: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: 'rgba(5,9,12, 0.6)',
      justifyContent: 'center',
      alignItems: 'center'
    },
    logoText: {
      color: '#fff',
      fontSize: 36,
      fontFamily: 'pt'
    },
    textBox: {
      width: 200,
      height: 175,
      fontFamily: 'sans-serif',
      fontSize: 14,
      color: '#fff',
      borderColor: '#fff',
      borderWidth: 2,
      justifyContent: 'center',
      marginTop: 50,
      padding: 20
    },
    logo: {
      width: 200,
      height: 200
    },
    redirect: {
      width: 80,
      height: 30,
      marginTop: 30
    },
    statistics: {
      flex: 1,
      width: '100%',
      height: '100%',
      backgroundColor: '#1B384F'
    },
    bigText: {
      color: '#fff',
      fontSize: 20,
      fontFamily: 'Space-Mono'
    }
});

这是我的 Statistics.js

import { StyleSheet, ImageBackground, Image, View, Text, Button } from 'react-native';
import { Font } from 'expo';
import {withNavigation} from 'react-navigation';

class Statistics extends React.Component {
    render() {
        return(
            <Text>Avail!</Text>
        );
    }
}
export default withNavigation(Statistics);

注意：为了简洁起见，我在 Initial.js 中省略了 StyleSheet。

Answer 1

我遇到了同样的问题。我修复的是使用withNavigation

在Statistics类中，

1、导入withNavigation。

import { withNavigation } from 'react-navigation';

然后，导出 Statistics 类，如下所示。

export default withNavigation(Statistics)

Answer 2

您需要导航到您的屏幕名称Stats。

<Button
 title="Start"
 onPress={() => this.props.navigation.navigate('Stats')}/> 

Answer 3

试试这个

const RootStack = createStackNavigator({
  Default: {
    screen: Initial
  },
  Stats: {
    screen: props => <Statistics {...props} />
  }
});