界面结构 一个TabNavigator 一个 StackNavigator结构，参考饿了么开源框架以及相关API
MainView 和 ChatScreen同属一个 StackNavigator
MainView为一个TabNavigator
=============================================================================================================================
上代码
============================================================================================================================
app.js
import React from 'react'; //Component用括号括起来 import { StyleSheet, AppRegistry, View, Image, TextView } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; import MainPage from './page/MainContainer'; import ChatModel from './page/Chat'; import MessageModel from './page/Message'; import MeModel from './page/Me'; import ChatScreen from './page/ChatScreen'; const MainView = TabNavigator({ Main: { screen: MainPage }, ChatPage: { screen: ChatModel }, Message: { screen: MessageModel }, Me: { screen: MeModel } }, //页面配置 // { // animationEnabled: false, //切换页面是否有动画效果 // tabBarPosition: 'bottom', //显示在低端，android默认显示在顶端 // backBehavior: 'none', //默认是按back按键跳到tab页，none为不跳转 // tabBarOptions: { // activeTintColor: '#111111', //文字和图片选中颜色 // inactiveTintColor: '#666666', //文字和图片未选中颜色 // showIcon: true, //android默认不显示 // indicatorStyle: { // //Height: 0,//如果TabBar下面有一条线，就设置高度为零即可 // style: { // //backgroundColor: , // //height // }, // labelStyle: { // //fontSize: 10//文字大小 // }, // } // } // } { lazy: true, tabBarPosition: 'bottom', tabBarOptions: { activeTintColor: '#3e9ce9', inactiveTintColor: '#999999', showIcon: true, style: { backgroundColor: '#fff' }, indicatorStyle: { opacity: 0 }, tabStyle: { padding: 0 } } } ) const styles = StyleSheet.create( { container: { justifyContent: 'center', alignItems: 'center', flex: 1, }, }); const App = StackNavigator( //路由页面配置 { Home: { screen: MainView, navigationOptions: { //导航栏标题 title: '主页面', //没有header属性 // header: { // visible: true, // title: '子页面1标题', // //left : //导航栏左按钮 // //right : //导航栏右按钮 // //style : //导航栏title的style // //tintColor ://导航栏的颜色 // cardStack: { // gesturesEnable: false, // } // }, }, path: '' }, //此处相当于进行界面申请声明，在同一个StackNavigator下可以进行参数使用 Chat: { screen: ChatScreen, navigationOptions: { title: '聊天界面chatscreen' } } }, //路由参数配置 { initialRouteName: 'Home', //类名 navigationOptions: { headerStyle: { backgroundColor: '#3e9ce9' }, headerTitleStyle: { color: '#fff', fontSize: 20 }, headerTintColor: '#fff' }, mode: 'card', headerMode: 'screen', //cardStyle: //样式 //onTransitionStart: //页面切换开始回调 //onTransitionEnd: //页面切换结束回调 //headerTitleStyle: {},//导航栏标题样式 //headerStyle:{},//导航栏样式 //headertTintColor: '#fff'//颜色值 } // { // headerMode: 'screen', // navigationOptions: { // headerStyle: { // backgroundColor: '#3e9ce9' // }, // headerTitleStyle: { // color: '#fff', // fontSize: 20 // }, // headerTintColor: '#fff' // } // } ); export default App;
=================================================================================================================
MainPage.js 主页界面
import React from 'react'; import { AppRegistry, Text, View, StyleSheet, } from 'react-native'; //由于使用未定义的TextView控件导致渲染问题 class MainPage extends React.Component { constructor(props) { super(props); this.state = { testCode: '1' }; } render() { return ( <View style = {styles.container} > <Text style = {styles.container} onPress = {this.goToChat.bind(this)}> 主界面 + {this.state.testCode} </Text> </View> ); }; goToChat() { this.props.navigation.navigate('Chat', { chatName: 'fromMainPage', getResult:function(myMessage){ this.setState({ testCode:myMessage, }) } }) } // render() { // const { // params // } = this.props.navigation.state; // return ( // <View style={{backgroundColor:'#fff',flex:1}}> // <Text style={{padding:20}}>Chat with</Text> // </View> // ); // } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); // module.exports = MainPage; export default MainPage; // export class MainPage;
============================================================================================================================
ChatModel.js 聊天界面
import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet, } from 'react-native'; class ChatModel extends React.Component { render() { return ( <View style = {styles.container}> <Text style = {styles.container}> 聊天界面 </Text> </View> ); }; } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); export default ChatModel;
===========================================================================================================================
MessageModel.js 消息界面
import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet, } from 'react-native'; class MessageModel extends React.Component { render() { return ( <View style = {styles.container}> <Text style = {styles.container}> 消息界面 </Text> </View> ); }; } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); export default MessageModel;
===================================================================================================================================
MeModel.js 我的界面
import React, { Component } from 'react'; import { AppRegistry, Text, View, StyleSheet, } from 'react-native'; class MeModel extends React.Component { render() { return ( <View style = {styles.container}> <Text style = {styles.container}> 我的界面 </Text> </View> ); }; } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center' } }); export default MeModel;
======================================================================================================================
ChatScreen.js 主界面按钮事件跳转界面
import React from 'react'; import { Button, Image, View, Text } from 'react-native'; //定义去哪聚属性 数组 普通变量 或者某个对象类型 // 类型定义 防止类型写错，在下面的propTypes有用到 // Arrays ---> React.PropTypes.array // Boolean ---> React.PropTypes.bool // Numbers ---> React.PropTypes.number // Strings ---> React.PropTypes.string // Objects ---> React.PropTypes.object // Functions ---> React.PropTypes.func // let tempTypeIds = []; // let maxCategory = 5; // 默认最多5个类别，远端可配置 // 由于是块级有效，所以在下面console看不到变量的值 // let TAG = 'CMCtag'; //变量声明，但是在class中无法看到其值，需要再进行赋值 var TAG = 'CMCtagVar'; //================================================================================================================== // 2.变量声明 // ES5只有2种声明变量的方法：var、function。 // ES6共有6种声明变量的方法：var、function、let 块级有效{}适合for、const只读属性、import(require)、class。 // const propTypes = { // categoryActions: PropTypes.object, // category: PropTypes.object.isRequired // }; class ChatScreen extends React.Component { constructor(props) { super(props); //声明可以进行动态改变的变量，其中在navigation中的setParams方法就可以改变这个变量=====相当于一个类改变另一个类的某个变量======================= this.state = { isRight: false }; //这种方式的变量声明可以直接在底部看到其值========================================================================================== // this.TAG = 'CMC'; } static navigationOptions = { title: '聊天', }; setRightState() { this.setState({ isRight: true }) console.log(TAG + ' isRight : ' + this.state.isRight); //==============================================================================================setParams回传改值待续 // this.props.navigation.setParams({ // testCode: '2' // }); // this.props.navigation.params.getResult("This is from SecondPageComponent"); // this.props.getResult("This is from SecondPageComponent"); } // {params.user} render() { //在方法中获取上个界面传递变量======================================================================================================== const { params } = this.props.navigation.state; //TAG 标识我们用的是 顶部var声明的变量，如果用 this.TAG则是相当于当前class中声明了一个变量============================================ TAG = 'CMC RENDER'; // alert(params.chatName); console.log( TAG + params.chatName); return ( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}} onPress = {this.setRightState.bind(this)}>Chat with {params.chatName}</Text> </View> ); } }; export default ChatScreen; // AppRegistry.registerComponent('ChatScreen', () => ChatScreen);
