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

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

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

Answer 2

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

来解决

在统计类中，

第一，导入withNavigation。

import { withNavigation } from 'react-navigation';

然后，按如下所示导出统计信息类。

export default withNavigation(Statistics)

Answer 3

尝试一下

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

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

3 个答案: