Question

            ***in 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,
    }
    });
    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,
    }
    });

列表项
```
***in contactDetails.js***

import React, { Component } from 'react';
```
导入{ 视图， StyleSheet，尺寸 TouchableHighlight，图片，文本， }来自“ react-native”；从'react-native-camera'导入相机；从“反应导航”导入{StackNavigator}；从“ ../Components/Finalpage”导入{Finalpage}； const RootStack = StackNavigator（{ 注册MEW：{ 屏幕：最终页， }， }）; CameraRoute类扩展了Component { 构造函数（道具）{ 超级（道具）; this.state = { 路径：null， }; } 拍照片（） { this.camera.capture（） .then（（数据）=> { console.log（data）; this._onPressButton（）; }） .catch（err => console.error（err））; } renderCamera（）{ 返回（    {    this.camera = cam;    }}    style = {styles.preview}    Aspect = {Camera.constants.Aspect.fill}    captureTarget = {Camera.constants.CaptureTarget.disk}    >           this.takePicture（）}       onPressOut = {（）=> this._onPressButtonNEW（）}       underlayColor =“ rgba（255，255，255，0.5）”       >            ）; } _onPressButton =（）=> { this.props.navigation.push（'SignUpMEW'）; } _onPressButtonNEW =（）=> { alert（“感谢存储数据”）; this.props.navigation.push（'SignUpMEW'）; 警报（this.props.navigation）; } renderImage（）{ 返回（           this.props.navigation.navigate（'SignUpMEW'）}


取消            ）;   }   render（）{   返回（         {this.state.path？ this.renderImage（）：this.renderCamera（）}      ）;   }   }   const styles = StyleSheet.create（{   容器： {   弹性：1，   alignItems：'中心'，   justifyContent：“中心”，   backgroundColor：“＃000”，   }，   预习： {   弹性：1，   justifyContent：'flex-end'，   alignItems：'中心'，   高度：Dimensions.get（'window'）。height，   宽度：Dimensions.get（'window'）。width   }，   捕获：{   宽度：70，   高度：70，   borderRadius：35，   borderWidth：5   borderColor：'#FFF'，   marginBottom：15，   }，   取消：{   位置：“绝对”，   右：20   最高：20   backgroundColor：“透明”，   颜色：“＃FFF”，   fontWeight：“ 600”，   字号：17   }   }）;   导出默认的CameraRoute;

第2页

***in final page*** 



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',
    }
});




i cannot able to navigate to final page please help me out  i am new to React so please help me out

Answer 1

首先：您的代码不可读且结构化。真可怕。

第二：据我所知，您对StackNavigator的使用是错误的。应该是这样的（您缺少create）：

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

Docs StackNavigator

无法在React Native中导航到其他页面

1 个答案: