路线' Home'应声明一个屏幕 - 反应原生问题

时间:2017-10-06 07:03:20

标签: react-native npm

我是React Native的新手并试图充实基本的前端。我有一个现有的节点服务器执行CRUD操作 - 现在我正在尝试充实一个家庭/登陆页面和可以从那里访问的注册页面。谢谢!

我在其他帖子中看到过这个问题,而且似乎通常是在课后定义这个StackNavigator的问题,但这不是我所做的。任何帮助将不胜感激。



/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import {StackNavigator} from 'react-navigation';
import {t} from 'tcomb-form-native';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';

const App = StackNavigator({
    Home: { screen: Home},
    Signup: { screen: Signup},
});

var user =  t.struct({
   name: t.String,
   username: t.String,
   password: t.String,
   email: t.String
});
var options = {};

export default class Home extends Component {
  _signup(){
    //goes to the signup screen
    navigate('Signup')

  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        //this should move to a new screen which will render the signup form!
        <Button style={styles.instructions}>
          onPress={this._signup()}
          title="sign up"
          color="#841584"
          accessibilityLabel="Sign up for my app"
        </Button>
        <Button style = {styles.instructions}>
          onPress={}
          title="view offers"
          color="#841584"
          accessibilityLabel="View offers on my app"
        </Button>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

class Signup extends Component {
  onPress(){
      var value = this.refs.form.getValue();
      console.log(value);
      //todo: wire up fetch to perform verification on node server
  }

  render() {
    return(
   <View style={styles.container}>
   <Form
   ref="form" type={user} options={options}/>
   <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor={'#99d9f4'}>
     <Text style={styles.buttonText}>Submit</Text>
   </TouchableHighlight>
   </View>
    )};
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
      button: {
      height: 36,
      backgroundColor: '#48BBEC',
      borderColor: '#48BBEC',
      borderWidth: 1,
      borderRadius: 8,
      marginBottom: 10,
      alignSelf: 'stretch',
      justifyContent: 'center'
  },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },

});

AppRegistry.registerComponent('Home', () => Home);
AppRegistry.registerComponent('Signup', () => Signup);
&#13;
&#13;
&#13;

0 个答案:

没有答案