如何通过反应导航更改屏幕(使用按钮)

我是本机的新手,但最近几个月我一直在研究如何使用按钮重定向到新活动,但无济于事。我当前的解决方案涉及到我使用多个文件中的反应导航,而App.js为其余页面创建了StackNavigator。但是,每当我按Initial.js上的按钮时,什么都不会发生。

我遵循了达米安·曼森(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。

六月

您需要导航到屏幕名称Stats

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在点击按钮时通过反应导航更改本机反应的屏幕?

如何更改后退按钮标签,反应导航

在特定屏幕上通过反应导航修改后退按钮

如何在屏幕外使用反应导航

在反应导航中使用堆栈导航器,如何使屏幕消失?

如何在反应导航中更改后退按钮路线

如何使用反应导航在屏幕之间切换?

如何使用按钮在反应中更改让编号

如何使用 kivymd 底部导航将屏幕更改为屏幕

如何使用导航按钮更改显示的 div?

如何使用堆栈导航器通过按一下按钮从一个屏幕导航到另一个屏幕?

如何使用反应导航?

我如何知道我是否已经使用选项卡导航(反应导航)离开了屏幕?

对导航后退按钮做出反应以返回到spalsh屏幕

在特定屏幕中禁用“后退”按钮(反应导航堆栈)

如何通过点击反应路由器 v4 中的按钮在路径上导航?

使用标题中的按钮进行反应导航

在反应中使用按钮导航的正确方法

如何在引导程序的小屏幕上更改导航栏切换按钮的位置

如何使用javascript中的按钮单击更改导航栏的颜色?

使用 Kivy 屏幕,如何根据屏幕 1 上按下按钮的文本更改屏幕 2 的标签?

使用导入的按钮在堆栈屏幕之间导航

如何设置图像以在反应导航中使用带有标题的全尺寸屏幕?

如何使用堆栈屏幕 headerLeft 和 headerRight 导航反应本机页面?

如何更改反应导航标题的高度

如何通过功能更改屏幕?

我如何使用道具在本机反应中从一个屏幕导航到另一个屏幕?

如何在反应组件外使用反应导航进行导航?

如何使用按钮创建导航栏,或者如何更改导航栏中文本的字体大小