react native で　フォームを送信して画面遷移

やりたいこと

フォームでメアドとユーザー名を入力してポストを飛ばしたら、そのあとに画面遷移

import React, { Component } from 'react';

import {
  AppRegistry,
  Text,
  Image,
  View,
  Button,
  StyleSheet,
  TextInput,
  Linking,
  Alert,
  Navigator
} from 'react-native';

import t from 'tcomb-form-native';
import { createStackNavigator } from 'react-navigation';

const Form = t.form.Form;

const Email = t.subtype(t.Str, (email) => {

  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  return reg.test(email);
});

const LoginFields = t.struct({
  username: Email,
  password: t.String,
});

const options = {
  fields: {
    password: {
      type: 'password',
      placeholder: 'Password',

    },
    username: {
      placeholder: 'e.g: abc@gmail.com',
      error: 'Insert a valid email'
    }
  }
};


class Login extends React.Component {

  _onSubmit() {

     const value = this.refs.form.getValue();
     if (value) {
     console.log(value.password);
     console.log(value.username);


    fetch('https://wordtranslate.info/react_test.php', {
    method: 'POST',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({

    password: value.password,

    username: value.username

    })

    }).then((response) => response.json())

    .then(  (responseJson) => {

    Alert.alert(  responseJson.password.toString()  );
    Alert.alert(  responseJson.username.toString()  );

    }).catch((error) => {console.error(error);});


    this.props.navigation.navigate('Details')

     }

  }

  render() {
    return (
      <View style={styles.containerView}>
      <Form
        ref="form"
        type={LoginFields}
        options={options}
      />
        <Text style={{color: 'blue', marginBottom: 10}}
          onPress={() => Linking.openURL('https://www.google.co.in')}>
          Forgot Password?
        </Text>

        <Button
            onPress={

            this._onSubmit.bind(this)

            }
            title="sign up"
            style={styles.loginButton}
            accessibilityLabel="Ok, Great!"

          />

      </View>
    );
  }
};

const styles= StyleSheet.create({
  containerView: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ffebcd',
    borderStyle: 'solid',
    borderColor: '#000000'
  },
  loginText: {
    fontSize: 20,
    marginBottom: 10
  },
  inputFields: {
    fontSize: 20,
    borderStyle: 'solid',
    borderColor: '#000000',
    borderRadius: 30,
    marginBottom: 10
  },
  loginButton: {
    backgroundColor: '#34A853'
  }
});

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: Login,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}