react native之界面切换

界面结构  一个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);