javascript - 无法导航到 native react 中的其他页面

Question

我无法导航到 React Native 中的其他页面。

这是我的 App.js:

        import React, { Component } from 'react';
        import { Platform, StyleSheet, Text, View,Dimensions,TextInput,TouchableOpacity,Button } from 'react-native';
        import Camera from 'react-native-camera';
        import ContactDetails from './Components/ContactDetails';
        import Finalpage from './Components/Finalpage'
        import { StackNavigator } from 'react-navigation';
        const instructions = Platform.select({
        ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
        android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
        });
        class HomeScreen extends Component {
        _onPressButton = ()=> {
        this.props.navigation.navigate('SignUp1');
        }
        render() {
        return (
        <View style={{ flex: 1 }}>
        <TouchableOpacity
        style={{
        backgroundColor: '#f2f2f2',
        paddingVertical: 10,
        borderRadius: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 35,
        }}>
        <Text style={{ color: '#010101' }}>Please Capture Image</Text>
        </TouchableOpacity>
        <Button
           onPress={this._onPressButton}
           title="Press Me"



           />
        </View>
        );
        }
        }
        export default class App extends Component
        <Props>
        {
        constructor(props) {
        super(props);
        this.state = {
        path: null,
        };
        }
        takePicture() {
        this.method();
        const { navigate } = this.props.navigation;
        alert("HI");
        this.camera.capture()
        .then((data) => {
        console.log(data);
        alert("HI");
        this.props.navigator.push({
        component: ContactDetails,
        });
        })
        .catch(err => console.error(err));
        }
        renderCamera() {
        const { navigate } = this.props.navigation;
        return (
        <Camera
           ref={(cam) =>
           {
           this.camera = cam;
           }}
           style={styles.preview}
           aspect={Camera.constants.Aspect.fill}
           captureQuality={Camera.constants.CaptureQuality.medium}
           captureTarget={Camera.constants.CaptureTarget.disk}
           orientation={Camera.constants.Orientation.auto}
           aspect={Camera.constants.Aspect.fill}
           >
           <TouchableHighlight
              style={styles.capture}
              onPress={this.takePicture()
              }
              underlayColor="rgba(255, 255, 255, 0.5)"
              >
              <View />
           </TouchableHighlight>
        </Camera>
        );
        }
        renderImage() {
        return (
        <View>
           <Image
              source={{ uri: this.state.path }}
              style={styles.preview}
              />
           <Text
              style={styles.cancel}
              onPress={() =>  this.method()}
              >Cancel
           </Text>
        </View>
        );
        }
        method(){
        alert("HI");
        this.props.navigation.navigate('SignUp1');
        }
        render() {
        return (
        <RootStack />
        )
        }
        }
        const RootStack = StackNavigator({
        Home: {
        screen: HomeScreen,
        },
        SignUp1: {
        screen: ContactDetails,
        },
        finalpage:{
        screen:Finalpage,
        }
        });

这是 App.js 文件的样式

        const styles = StyleSheet.create({
        container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000',
        },
        preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width
        },
        capture: {
        width: 70,
        height: 70,
        borderRadius: 35,
        borderWidth: 5,
        borderColor: '#FFF',
        marginBottom: 15,
        },
        cancel: {
        position: 'absolute',
        right: 20,
        top: 20,
        backgroundColor: 'transparent',
        color: '#FFF',
        fontWeight: '600',
        fontSize: 17,
        }
        });

1. 列表项:在 contactDetails.js 中

    import React, { Component } from 'react';
    import {
    View,
    StyleSheet,
    Dimensions,
    TouchableHighlight,
    Image,
    Text,
    } from 'react-native';
    import Camera from 'react-native-camera';
    import { StackNavigator } from 'react-navigation';
    import {Finalpage} from'../Components/Finalpage';
    const RootStack = StackNavigator({
    SignUpMEW: {
    screen: Finalpage,
    },
    });
    class CameraRoute extends Component {
    constructor(props) {
    super(props);
    this.state = {
    path: null,
    };
    }
    takePicture() {
    this.camera.capture()
    .then((data) => {
    console.log(data);
    this._onPressButton();
    })
    .catch(err => console.error(err));
    }
    renderCamera() {
    return (
    <Camera
       ref={(cam) =>
       {
       this.camera = cam;
       }}
       style={styles.preview}
       aspect={Camera.constants.Aspect.fill}
       captureTarget={Camera.constants.CaptureTarget.disk}
       >
       <TouchableHighlight
          style={styles.capture}
          onPressIn={() =>
          this.takePicture()}
          onPressOut={() => this._onPressButtonNEW()}
          underlayColor="rgba(255, 255, 255, 0.5)"
          >
          <View />
       </TouchableHighlight>
    </Camera>
    );
    }
    _onPressButton = ()=> {
    this.props.navigation.push('SignUpMEW');
    }
    _onPressButtonNEW = ()=> {
    alert("Thanks For Storing the data");
    this.props.navigation.push('SignUpMEW');
    alert(this.props.navigation);
    }
    renderImage() {
    return (
    <View>
       <Image
          source={{ uri: this.state.path }}
          style={styles.preview}
          />
       <Text
          style={styles.cancel}
          onPress={() =>   this.props.navigation.navigate('SignUpMEW')}
          >Cancel
       </Text>
    </View>
    );
    }
    render() {
    return (
    <View style={styles.container}>
       {this.state.path ? this.renderImage() : this.renderCamera()}
    </View>
    );
    }
    }

这是 contactDetails.js 的样式

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
    },
    preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
    },
    capture: {
    width: 70,
    height: 70,
    borderRadius: 35,
    borderWidth: 5,
    borderColor: '#FFF',
    marginBottom: 15,
    },
    cancel: {
    position: 'absolute',
    right: 20,
    top: 20,
    backgroundColor: 'transparent',
    color: '#FFF',
    fontWeight: '600',
    fontSize: 17,
    }
    });
    export default CameraRoute;

第 2 页 - 最后一页

        import React, {Component
        } from 'react';

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


        export class Finalpage extends React.Component{ 
          render() {
          return (
            <View style={styles.container}>
              <Text>Thanks For Update</Text>

            </View>
          );
        }
        }

这是最终页面的样式

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

我无法导航到最后一页，请帮助我，我是 React 新手，所以请帮助我

Answer 1

首先:您的代码不可读且不结构化。读起来很可怕。

第二:据我所知，您对 StackNavigator 的使用是错误的。应该是这样的(你缺少create):

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  SignUp1: {
    screen: ContactDetails,
  },
  finalpage:{
    screen:Finalpage,
  }
});

Docs StackNavigator