import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    TouchableOpacity
} from 'react-native';

export default class App extends Component<Props> {
    render() {
        return (
            <NavigatorIOS
                style={{flex: 1}} // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
                interactivePopGestureEnabled={true}//决定是否启用滑动返回手势。
                translucent={true}//决定导航条是否半透明
                initialRoute={{//初始化路由
                    component: Home,//路由的根视图
                    title: '首页',//标题
                }}
            />
        );
    }
}
class Home extends Component {
    _onPressView(nextRoute) {
        this.props.navigator.push(nextRoute)
    }

    render() {
        const nextRoute = {
            component: Detail,//目的地视图
            title: '详情',//目的地标题
            titleTextColor: 'blue',//标题颜色
            shadowHidden: true,//决定是否要隐藏1像素的阴影
            barTintColor: 'white',//导航条的背景颜色
            tintColor: 'orange',  // 按钮的颜色
            leftButtonTitle: '返回',//导航条的左按钮
            onLeftButtonPress: () => {
                this.props.navigator.pop()
            },
            rightButtonTitle: '相册',//导航条的右按钮
            onRightButtonPress: () => {//导航条右按钮触发事件
                alert('没有该照片');
            },
            passProps: {myProp: 'bar'}
        };
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => {
                        this._onPressView(nextRoute)
                    }}
                >
                    <Text>{"详情！"}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
class Detail extends Component {

    render() {
        return (
            <View style={[styles.container, {backgroundColor: "green"}]}>
                <TouchableOpacity
                    onPress={() => {
                        this.props.navigator.pop()
                    }}
                >
                    <Text>{"首页！"}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
    }
});