1.利用TouchableOpacity包住Text实现点击效果，onPress是点击时调用，当点击时onPress触发，调用外部传入的onPressCallback 方法实现触发事件在封装的LoginButton外部定义触发的效果。
6.NetUtil.js
let NetUtil = { postJson(url, data, callback){ var fetchOptions = { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data;boundary=6ff46e0b6b5148d984f148b6542e5a5d' }, body:data }; fetch(url, fetchOptions) .then((response) => response.text()) .then((responseText) => { // callback(JSON.parse(responseText)); callback(responseText); }).done(); }, } export default NetUtil;
说明：网络方法，依次传入请求地址，请求参数，成功回调事件
7.LoginSuccess.js
import React from 'react'; import { View, Navigator, TouchableOpacity, ToolbarAndroid, Text } from 'react-native'; export default class LoginSuccess extends React.Component { constructor(props){ super(props); this.state = {}; } //回到第一个页面去 onJump(){ const { navigator } = this.props; if (navigator) { navigator.pop(); } } render(){ return ( <View > <TouchableOpacity onPress = {this.onJump.bind(this)}> <Text> 登录成功，点击返回登录页面 </Text> </TouchableOpacity> </View> ); } }
说明：登录成功后跳转的界面
8.navigator.js
导航器控制类。利用name，component 实现导航（可以自己随便定义命名，只要后面的类中访问同样的命名即可，课参考LoginSuccess.js 中的返回功能）
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Navigator } from 'react-native'; import Main from './ui/main'; export default class navigator extends Component { constructor(props) { super(props); } render() { let defaultName = 'Main'; let defaultComponent = Main; return ( <Navigator initialRoute = {{name : defaultName , component: defaultComponent}} configureScene = {(route) => { return Navigator.SceneConfigs.VerticalDownSwipeJump; }} renderScene={(route,navigator) => { let Component = route.component; return <Component {...route.params} navigator = {navigator} /> }} /> ); } };
9.index.android.js
规定的类
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { ToolbarAndroid, AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from 'react-native'; import Navigator from './app/navigator'; AppRegistry.registerComponent('AwesomeProject', () => Navigator);