时间戳

首页 > 解决方案 > 在段中导航出错 - react-native

react-native - 在段中导航出错 - react-native

问题描述

我是初学者并在 react-native 中创建第一个应用程序。我做到了，但卡在一个地方。我刚刚在标题中添加了一个片段，并在片段点击的基础上隐藏/显示了登录/注册页面，但问题在于导航，我在登录页面中有一个按钮，但这不起作用并引发错误。这是我的细分页面代码

import React, { Component } from 'react'; import { Platform, StyleSheet, Text, ScrollView } from 'react-native'; 
import { Container, Header, Left,Button,Icon,Body,Title, Segment, View, Content } from 'native-base';
import Login from './login'; import Signup from './signup';

const forgot = (props) => ( 
  <View style={{
 flex:1,
 flexDirection:'row',
 justifyContent:'center',
 alignItems:'center'
 }} > 
   <Text style={{
   fontSize:17,justifyContent:'center'
   }}> 
   Register a new account 
   <Text/>
 <View>
)
export default class Choices extends Component{
  constructor(props) {
    super(props); 
    this.state = { seg: 1, login:1 }; 
    } 
    render() { 
    const { navigate } = this.props.navigation; 
    return ( <Header hasSegment style={{
    backgroundColor:'#ff9102'
    }} androidStatusBarColor="#ed8702" iosBarStyle="light-content"> 
    <Button transparent onPress={() => this.props.navigation.goBack()} >
    <Title>Login</Title> 
    <Segment style={{
  backgroundColor:'#F5FCFF',display:'flex',height:50}}> 
    <Button first active={this.state.seg === 1 ? true:false} onPress={()=>this.setState({seg:1,login:1})} style={{flex:1,justifyContent:'center',height:60}} >
    JOBSEEKER 
    </Button>
    <Button last active={this.state.seg === 2 ? true : false} onPress={() => this.setState({ seg: 2,login:2 })} style={{
    flex:1,
    justifyContent:'center',
    height:60}} > 
    EMPLOYER 
     </Button>
    {this.state.seg === 1 && } {this.state.seg === 2 && }

      </Content>
    </ScrollView>
    </Container>
);
} }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', } });

这是我的登录页面代码 import React, { Component } from 'react'; 从'react-native'导入{平台，样式表，文本，滚动视图}；从'native-base'导入{容器，内容，视图，按钮}；从“tcomb-form-native”导入 t；var _ = 要求（'lodash'）；常量形式 = t.form.Form; 常量样式表 = _.cloneDeep(t.form.Form.stylesheet);

Form.stylesheet.textbox.normal.height = 50; Form.stylesheet.textbox.normal.marginBottom = 20; Form.stylesheet.textbox.normal.borderRadius = 30; Form.stylesheet.textbox.normal.paddingHorizo​​ntal = 30; Form.stylesheet.textbox.normal.borderWidth = 2; Form.stylesheet.textbox.normal.fontSize = 20; Form.stylesheet.textbox.normal.color = '#66747c';

var loginForm = t.struct({ email:t.String, password:t.String });

var formOptions = { 
  fields:{ 
    email:{ placeholder:'Email', }, 
    password:{ placeholder:'Password' }
  },
  auto:'none' 
}

export default class Login extends Component{
  constructor(props){ 
    super(props); 
    this.state = { seg: 1 };
  }
  render() { 
    alert(JSON.stringify(this.props)) 
    return ( 
      <View style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}}> <Button rounded={true} large={true} style={{
      backgroundColor:'#ff9102',
      paddingHorizontal:30,flex:1,justifyContent:'center'}} > 
      <Text style={{fontSize:27,color:'#fff'}}>Login <View style{{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}} 
      padder > 
      <Text style={{fontSize:17,justifyContent:'center'}}> Register a new account 
      <View style={{
      flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}} padder > 
      <Button transparent onPress={()=>this.props.navigation.navigate('Forgot')} > <Text style={{fontSize:17,justifyContent:'center', color:'#ff9102'}}> 
      Forgot Password 
    ); 
  } 
}
const styles = StyleSheet.create(
{ 
container: { flex: 1, backgroundColor: '#F5FCFF', } })
;

请帮助我在这段代码中做错了什么。

标签： react-nativenavigation-drawerreact-navigationnative-basestack-navigator

解决方案

推荐阅读