Javascript 如何使用react导航更改屏幕（使用按钮）

我是一个新的本地人，但在过去的几个小时里，我一直在研究如何通过按钮重定向到新的活动，但没有结果。我当前的解决方案涉及使用来自多个文件的react导航，App.js为其余页面创建StackNavigator。但是，每当我按下Initial.js上的按钮时，什么都不会发生

我遵循了Damien Manson的教程，但是按钮仍然不起作用。在调用我的按钮之前，我尝试引用应用程序，但每当我尝试在模拟器上运行它时，它都不会显示错误日志，也不会加载。它停留在“下载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;

这是我的首字母.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'
    }
});

从'react native'导入{样式表、图像背景、图像、视图、文本、按钮}；
从“expo”导入{Font}；
从“../App”导入应用程序；
从“react navigation”导入{withNavigation}；
从“./Statistics”导入统计信息；
导出默认类初始扩展React.Component{
静态导航选项={header:null}
componentDidMount（）{
loadAsync（{'pt'：require（'../assets/fonts/pt.ttf'）}）；
loadAsync（{'Karla'：require（'../assets/fonts/Karla Regular.ttf'））}）；
loadAsync（{'Space-Mono'：require（'../assets/fonts/SpaceMono Regular.ttf'））}）；
}
状态={fontLoaded:false}；
异步组件didmount（）{
wait Font.loadAsync（{'pt'：require（'../assets/fonts/pt.ttf'），}）；
wait Font.loadAsync（{'Karla'：require（'../assets/fonts/Karla Regular.ttf'），}）；
wait Font.loadAsync（{'Space-Mono'：require（'../assets/fonts/SpaceMono Regular.ttf'），}）；
this.setState（{fontLoaded:true}）；
}
render（）{
返回(
{this.state.fontLoaded？（！任意）：null}
总部位于芝加哥的应用程序“！Arbitral”以其易于导航的界面，旨在教育大众可回收物品，同时强调可持续发展的重要性。
this.props.navigation.navigate（'Statistics'）}
/> 
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
宽度：“100%”，
高度：“100%”，
},
父视图：{
弹性：1，
flexDirection:'列'，
背景颜色：“rgba（5,9,12,0.6）”，
为内容辩护：“中心”，
对齐项目：“中心”
},
标识文字：{
颜色：“#fff”，
尺寸：36，
fontFamily:“pt”
},
文本框：{
宽度：200，
身高：175，
fontFamily:'无衬线'，
尺寸：14，
颜色：“#fff”，
边框颜色：“#fff”，
边界宽度：2，
为内容辩护：“中心”，
玛金托普：50，
填充：20
},
标志：{
宽度：200，
身高：200
},
重定向：{
宽度：80，
身高：30，
玛金托普：30
},
统计数字：{
弹性：1，
宽度：“100%”，
高度：“100%”，
背景颜色：“#1B384F”
},
bigText：{
颜色：“#fff”，
尺寸：20，
fontFamily:“空间单声道”
}
});

这是我的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);

从'react native'导入{样式表、图像背景、图像、视图、文本、按钮}；
从“expo”导入{Font}；
从“react navigation”导入{withNavigation}；
类统计信息扩展了React.Component{
render（）{
返回(
效用！
);
}
}
使用导航导出默认值（统计）；

---

注意：为了简洁起见，我省略了Initial.js中的样式表。

我也有同样的问题。我通过使用

和导航

在统计学课程中

首先，使用导航导入

从“反应导航”导入{withNavigation}

然后，导出统计数据类，如下所示

使用导航导出默认值（统计）
您需要导航到您的屏幕名，即
Stats

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

this.props.navigation.navigate（'Stats'）}>
试试这个

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

const RootStack=createStackNavigator({
默认值：{
屏幕：首字母
},
统计数据：{
屏幕：道具=>
}
});
我在最初的问题中添加了我的Statistics.js，并附上了您的建议。该应用程序现在根本不运行，而是显示错误（或警告？
Require cycle:app.js->components\Initial.js->app.js
您还可以将这两条语句添加到
Initial
类中吗？刚刚添加了它们，但现在默认屏幕是Statistics.js。我不需要改为导出默认组件吗？是的，请。将其更改回
导出默认初始扩展名.Component
。这很奇怪。我用上述方法（解决方案）修复了相同的问题。
Require cycle:App.js->components\Initial.js->App.js
这只是一个警告。我说得对吗？您是否尝试取消它？因为您正在导航到一个不存在的路由，所以路由名称为
Stats
和
Default
。