{"id":486,"date":"2023-02-25T14:05:41","date_gmt":"2023-02-25T06:05:41","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=486"},"modified":"2023-04-29T20:51:52","modified_gmt":"2023-04-29T12:51:52","slug":"react-native-learning-navigator-component","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-navigator-component\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4bNavigator\u7ec4\u4ef6"},"content":{"rendered":"

Navigator\u7ec4\u4ef6\u521d\u63a2<\/h2>\n

\u4e00\u4e2a\u5e94\u7528\u5f80\u5f80\u662f\u7531\u591a\u529f\u80fd\u89c6\u56fe\u7ec4\u6210\uff01\u591a\u9875\u9762\u7684\u5207\u6362\uff1a\u8def\u7531\u6216\u5bfc\u822a<\/p>\n

\u5728RN\u4e2d\u4e13\u95e8\u8d1f\u8d23\u89c6\u56fe\u5207\u6362\u7684\u7ec4\u4ef6\uff1aNavigator<\/code>\u3001NavigatorIOS<\/code><\/p>\n

<\/p>\n

\u5bfc\u822a\u5668\u5bf9\u6bd4\uff1a<\/p>\n

Navigator<\/code>\u548cNavigatorIOS<\/code>\u90fd\u53ef\u4ee5\u7528\u6765\u7ba1\u7406\u5e94\u7528\u4e2d\u201c\u573a\u666f\u201d\u7684\u5bfc\u822a\uff08\u4e5f\u53ef\u4ee5\u79f0\u4f5c\u5c4f\u5e55\uff09\u3002\u5bfc\u822a\u5668\u5efa\u7acb\u4e86\u4e00\u4e2a\u8def\u7531\u6808\uff0c\u7528\u6765\u5f39\u51fa\uff0c\u63a8\u5165\u6216\u8005\u66ff\u6362\u8def\u7531\u72b6\u6001\u3002\u5b83\u4eec\u548chtml5\u4e2d\u7684history API\u5f88\u7c7b\u4f3c\u3002\u4e3b\u8981\u7684\u533a\u522b\u5728\u4e8eNavigatorIOS\u4f7f\u7528\u4e86iOS\u4e2d\u7684UINavigationController\u7c7b\uff0c\u800cNavigator\u5219\u5b8c\u5168\u7528js\u91cd\u5199\u4e86\u4e00\u4e2a\u7c7b\u4f3c\u529f\u80fd\u7684React\u7ec4\u4ef6\u3002\u56e0\u6b64Navigator\u53ef\u4ee5\u517c\u5bb9iOS\u548cAndroid\uff0c\u800cNavigatorIOS\u53ea\u80fd\u7528\u4e8eiOS\u3002<\/p>\n

NavigatorIOS\uff1a\u8f7b\u91cf\u3001\u53d7\u9650\u7684API\u8bbe\u7f6e\uff0c\u4f7f\u5176\u76f8\u5bf9Navigator\u6765\u8bf4\u4e0d\u592a\u65b9\u4fbf\u5b9a\u5236\u3002\u7531\u5f00\u6e90\u793e\u533a\u4e3b\u5bfc\u5f00\u53d1 \u2014\u2014 React Native\u7684\u5b98\u65b9\u56e2\u961f\u5e76\u4e0d\u5728\u81ea\u5df1\u7684\u5e94\u7528\u4e2d\u4f7f\u7528\u3002\u5bf9\u4e8e\u5927\u591a\u6570\u6b63\u5f0f\u7684App\u5f00\u53d1\uff0c\u6211\u4eec\u5efa\u8bae\u4f7f\u7528Navigator \u2014\u2014 \u4f7f\u7528NavigatorIOS\u5b9e\u73b0\u590d\u6742\u7684\u9700\u6c42\u5f88\u5bb9\u6613\u78b0\u5230\u9ebb\u70e6\u3002<\/p>\n

\u539f\u7406<\/h3>\n

\u5bfc\u822a\u5668\u901a\u8fc7\u8def\u7531\u5bf9\u8c61\u6765\u5206\u8fa8\u4e0d\u540c\u7684\u573a\u666f\u3002\u5229\u7528renderScene\u65b9\u6cd5\uff0c\u5bfc\u822a\u680f\u53ef\u4ee5\u6839\u636e\u6307\u5b9a\u7684\u8def\u7531\u6765\u6e32\u67d3\u573a\u666f\u3002<\/p>\n

\u53ef\u4ee5\u901a\u8fc7configureScene\u5c5e\u6027\u83b7\u53d6\u6307\u5b9a\u8def\u7531\u5bf9\u8c61\u7684\u914d\u7f6e\u4fe1\u606f\uff0c\u4ece\u800c\u6539\u53d8\u573a\u666f\u7684\u52a8\u753b\u6216\u8005\u624b\u52bf\u3002<\/p>\n

class RNAPP extends Component {\n    render() {\n        let defaultName='List';\n        let defaultComponent=List;\n        return (\n            <Navigator\n                initialRoute={{ name: defaultName, component: defaultComponent }}\n                \/\/\u914d\u7f6e\u573a\u666f\n                configureScene = {\n                    (route) => {\n                    \/\/\u8fd9\u4e2a\u662f\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u65f6\u5019\u7684\u52a8\u753b\uff0c\u5177\u4f53\u6709\u54ea\u4e9b\uff1f\u53ef\u4ee5\u770b\u8fd9\u4e2a\u76ee\u5f55\u4e0b\uff0c\u6709\u6e90\u4ee3\u7801\u7684: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n                        return Navigator.SceneConfigs.VerticalDownSwipeJump;\n                    }\n                }\n\n                renderScene = {\n                    (route, navigator) => {\n                        let Component = route.component;\n                        return <Component {...route.params} navigator={navigator} \/>\n                    }\n                }\n            \/>\n        );\n    }\n}<\/code><\/pre>\n
\u53ef\u4ee5\u770b\u5230\u56de\u8c03\u91cc\u7684\u4e24\u4e2a\u53c2\u6570\uff1aroute<\/code>, navigator<\/code><\/p>\n
\u901a\u8fc7\u6253\u5370\u6211\u4eec\u53d1\u73b0route\u91cc\u5176\u5b9e\u5c31\u662f\u6211\u4eec\u4f20\u9012\u7684name,component\u8fd9\u4e24\u4e2a\u5bf9\u8c61\uff0cnavigator\u662f\u4e00\u4e2aNavigator\u7684\u5bf9\u8c61\uff0c\u5b83\u6709push pop jump…\u7b49\u65b9\u6cd5\uff0c\u8fd9\u662f\u6211\u4eec\u7528\u6765\u8df3\u8f6c\u9875\u9762\u7528\u7684\u90a3\u4e2anavigator\u5bf9\u8c61\u3002<\/p>\n
class List extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {};\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        \/\/\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u53ef\u4ee5\u53d6\u5f97 props.navigator?\u8bf7\u770b\u4e0a\u6587:\n        \/\/<Component {...route.params} navigator={navigator} \/>\n        \/\/\u8fd9\u91cc\u4f20\u9012\u4e86navigator\u4f5c\u4e3aprops\n        if(navigator) {\n            navigator.push({\n                name: 'Detail',\n                component: Detail,\n            })\n        }\n    }\n\n    render(){\n        return (\n            <ScrollView style={styles.flex}>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u2606 \u8c6a\u534e\u90ae\u8f6e\u6d4e\u5dde\u5c9b3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u53f0\u6e7e3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u5730\u4e2d\u6d778\u65e5\u6e38<\/Text>\n            <\/ScrollView>\n        );\n    }\n}<\/code><\/pre>\n
\u8fd9\u91cc\u6709\u4e00\u4e2a\u5224\u65ad\uff0c\u4e5f\u5c31\u662f\u5982\u679c\u4f20\u9012\u8fdb\u6765\u7684component\u5b58\u5728\uff0c\u90a3\u6211\u4eec\u5c31\u662f\u8fd4\u56de\u8fd9\u4e2acomponent\uff0c\u7ed3\u5408\u524d\u9762 initialRoute \u7684\u53c2\u6570\uff0c\u6211\u4eec\u5c31\u662f\u77e5\u9053\uff0c\u8fd9\u662f\u4e00\u4e2a\u4f1a\u88abrender\u51fa\u6765\u7ed9\u7528\u6237\u770b\u5230\u7684component\uff0c\u7136\u540enavigator\u4f5c\u4e3aprops\u4f20\u9012\u7ed9\u4e86\u8fd9\u4e2acomponent\u3002<\/p>\n
\u6240\u4ee5\u4e0b\u4e00\u6b65\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u62ff\u5230\u8fd9\u4e2aprops.navigator<\/code>\u3002<\/p>\n
\u6e90\u7801<\/h3>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n'use strict';\n\nimport React, {\n    AppRegistry,\n    Component,\n    StyleSheet,\n    PixelRatio,\n    Navigator,\n    ScrollView,\n    Text,\n    View\n} from 'react-native';\n\nclass RNAPP extends Component {\n    render() {\n        let defaultName='List';\n        let defaultComponent=List;\n        return (\n            <Navigator\n                initialRoute={{ name: defaultName, component: defaultComponent }}\n                \/\/\u914d\u7f6e\u573a\u666f\n                configureScene = {\n                    (route) => {\n                    \/\/\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u7684\u52a8\u753b\uff0c\u5177\u4f53\u503c\u53ef\u4ee5\u67e5\u770b\u6e90\u4ee3\u7801: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n                        return Navigator.SceneConfigs.VerticalDownSwipeJump;\n                    }\n                }\n\n                renderScene = {\n                    (route, navigator) => {\n                        let Component = route.component;\n                        return <Component {...route.params} navigator={navigator} \/>\n                    }\n                }\n            \/>\n        );\n    }\n}\n\nclass List extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {};\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        \/\/\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u53ef\u4ee5\u53d6\u5f97 props.navigator?\u8bf7\u770b\u4e0a\u6587:\n        \/\/<Component {...route.params} navigator={navigator} \/>\n        \/\/\u8fd9\u91cc\u4f20\u9012\u4e86navigator\u4f5c\u4e3aprops\n        if(navigator) {\n            navigator.push({\n                name: 'Detail',\n                component: Detail,\n            })\n        }\n    }\n\n    render(){\n        return (\n            <ScrollView style={styles.flex}>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u2606 \u8c6a\u534e\u90ae\u8f6e\u6d4e\u5dde\u5c9b3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u53f0\u6e7e3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u5730\u4e2d\u6d778\u65e5\u6e38<\/Text>\n            <\/ScrollView>\n        );\n    }\n}\n\nclass Detail extends Component{\n    constructor(props) {\n        super(props);\n        this.state = {};\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        if(navigator) {\n            \/\/\u5f88\u719f\u6089\u5427\uff0c\u5165\u6808\u51fa\u6808~ \u628a\u5f53\u524d\u7684\u9875\u9762pop\u6389\uff0c\u5373\u53ef\u8fd4\u56de\u4e0a\u4e00\u4e2a\u9875\u9762\n            navigator.pop();\n        }\n    }\n\n    render(){\n        return(\n            <ScrollView>\n              <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u70b9\u51fb\u6211\u53ef\u4ee5\u8df3\u56de\u53bb<\/Text>\n            <\/ScrollView>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex:{\n        flex:1,\n    },\n    list_item:{\n        height:40,\n        marginLeft:10,\n        marginRight:10,\n        fontSize:20,\n        borderBottomWidth:1,\n        borderBottomColor:'#ddd',\n        justifyContent:'center',\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n
Navigator\u53c2\u6570\u4f20\u9012<\/h2>\n
\u600e\u4e48\u4f20\u9012\u53c2\u6570\u8fc7\u53bb\uff0c\u6216\u8005\u4ece\u5bf9\u65b9\u83b7\u53d6\u53c2\u6570\u3002<\/p>\n
\u4ece\u5217\u8868\u9875\u8df3\u8f6c\u81f3\u8be6\u60c5\u9875<\/h3>\n
\uff081\uff09\u4f20\u9012\u53c2\u6570\uff0c\u901a\u8fc7push\u65b9\u6cd5\u3002<\/p>\n
navigator.push({\n    name: 'Detail',\n    component: Detail,\n    params:{\n        author: this.state.author,\n    }\n})<\/code><\/pre>\n
\u8fd9\u4e2a\u8bed\u6cd5\u662f\u628aroutes.params<\/code>\u91cc\u7684\u6bcf\u4e2a key \u4f5c\u4e3a props \u7684\u4e00\u4e2a\u5c5e\u6027\uff1a{...route.params}<\/code><\/p>\n
\uff082\uff09\u63d0\u53d6\u53c2\u6570<\/p>\n
componentDidMount() {\n    this.setState({\n        author:this.props.author,\n    });\n}<\/code><\/pre>\n
\uff083\uff09\u4f7f\u7528\u53c2\u6570<\/p>\n
{this.state.author}<\/code><\/pre>\n
\u6e90\u7801\uff1a<\/p>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n'use strict';\n\nimport React, {\n    AppRegistry,\n    Component,\n    StyleSheet,\n    PixelRatio,\n    Navigator,\n    ScrollView,\n    Text,\n    View\n} from 'react-native';\n\nclass RNAPP extends Component {\n    render() {\n        let defaultName = 'List';\n        let defaultComponent = List;\n        return (\n            <Navigator\n                initialRoute = {{ name: defaultName, component: defaultComponent }}\n                \/\/\u914d\u7f6e\u573a\u666f\n                configureScene = {\n                    (route) => {\n                        \/\/\u8fd9\u4e2a\u662f\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u65f6\u5019\u7684\u52a8\u753b\uff0c\u5177\u4f53\u6709\u54ea\u4e9b\uff1f\u53ef\u4ee5\u770b\u8fd9\u4e2a\u76ee\u5f55\u4e0b\uff0c\u6709\u6e90\u4ee3\u7801\u7684: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n                        return Navigator.SceneConfigs.VerticalDownSwipeJump;\n                    }\n                }\n                renderScene = {\n                    (route, navigator) => {\n                        let Component = route.component;\n                        return <Component {...route.params} navigator={navigator} \/>\n                    }\n                }\n            \/>\n        );\n    }\n}\n\nclass List extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            author:'rnapp.cc'\n        };\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        \/\/\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u53ef\u4ee5\u53d6\u5f97 props.navigator?\u8bf7\u770b\u4e0a\u6587:\n        \/\/<Component {...route.params} navigator={navigator} \/>\n        \/\/\u8fd9\u91cc\u4f20\u9012\u4e86navigator\u4f5c\u4e3aprops\n        if (navigator) {\n            navigator.push({\n                name: 'Detail',\n                component: Detail,\n                params:{\n                    author: this.state.author,\n                }\n            })\n        }\n    }\n\n    render(){\n        return (\n            <ScrollView style={styles.flex}>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u2606 \u8c6a\u534e\u90ae\u8f6e\u6d4e\u5dde\u5c9b3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u53f0\u6e7e3\u65e5\u6e38<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u5730\u4e2d\u6d778\u65e5\u6e38<\/Text>\n            <\/ScrollView>\n        );\n    }\n}\n\nclass Detail extends Component{\n    constructor(props) {\n        super(props);\n        this.state = {};\n    }\n\n    componentDidMount() {\n        this.setState({\n            author:this.props.author,\n        });\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        if(navigator) {\n            \/\/\u5f88\u719f\u6089\u5427\uff0c\u5165\u6808\u51fa\u6808~ \u628a\u5f53\u524d\u7684\u9875\u9762pop\u6389\uff0c\u5373\u53ef\u8fd4\u56de\u4e0a\u4e00\u4e2a\u9875\u9762\n            navigator.pop();\n        }\n    }\n\n    render() {\n        return(\n            <ScrollView>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u4f5c\u8005\u662f\uff1a{this.state.author}<\/Text>\n            <\/ScrollView>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex:{\n        flex:1,\n    },\n    list_item:{\n        height:40,\n        marginLeft:10,\n        marginRight:10,\n        fontSize:20,\n        borderBottomWidth:1,\n        borderBottomColor:'#ddd',\n        justifyContent:'center',\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);\n<\/code><\/pre>\n
\u4ece\u8be6\u60c5\u9875\u8fd4\u56de\u81f3\u5217\u8868\u9875<\/h3>\n
\u7efc\u5408\u5b9e\u4f8b\uff1a\u4ece\u5217\u8868\u9875\u4f20\u9012\u7528\u6237id\u7ed9\u8be6\u60c5\u9875\uff0c\u8be6\u60c5\u9875\u8ddf\u8fdb\u7528\u6237id\u67e5\u8be2\u7528\u6237\u4fe1\u606f\uff0c\u5e76\u628a
\n\u7528\u6237\u4fe1\u606f\u56de\u4f20\u7ed9\u5217\u8868\u9875\u663e\u793a\u51fa\u6765<\/p>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n'use strict';\n\nimport React, {\n    AppRegistry,\n    Component,\n    StyleSheet,\n    PixelRatio,\n    Navigator,\n    ScrollView,\n    Text,\n    View\n} from 'react-native';\n\nclass RNAPP extends Component {\n    render() {\n        let defaultName='List';\n        let defaultComponent=List;\n        return (\n            <Navigator\n                initialRoute = {{ name: defaultName, component: defaultComponent }}\n            \/\/\u914d\u7f6e\u573a\u666f\n                configureScene = {\n                    (route) => {\n                        \/\/\u8fd9\u4e2a\u662f\u9875\u9762\u4e4b\u95f4\u8df3\u8f6c\u65f6\u5019\u7684\u52a8\u753b\uff0c\u5177\u4f53\u6709\u54ea\u4e9b\uff1f\u53ef\u4ee5\u770b\u8fd9\u4e2a\u76ee\u5f55\u4e0b\uff0c\u6709\u6e90\u4ee3\u7801\u7684: node_modules\/react-native\/Libraries\/CustomComponents\/Navigator\/NavigatorSceneConfigs.js\n                        return Navigator.SceneConfigs.VerticalUpSwipeJump;\n                    }\n                }\n                renderScene = {\n                    (route, navigator) => {\n                        let Component = route.component;\n                        return <Component {...route.params} navigator={navigator} \/>\n                   }\n                }\n            \/>\n        );\n    }\n}\n\nclass List extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            id:1,\n            user:null,\n        };\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        \/\/\u4e3a\u4ec0\u4e48\u8fd9\u91cc\u53ef\u4ee5\u53d6\u5f97 props.navigator?\u8bf7\u770b\u4e0a\u6587:\n        \/\/<Component {...route.params} navigator={navigator} \/>\n        \/\/\u8fd9\u91cc\u4f20\u9012\u4e86navigator\u4f5c\u4e3aprops\n        const self = this;\n        if (navigator) {\n            navigator.push({\n                name: 'Detail',\n                component: Detail,\n                params:{\n                    id: this.state.id,\n                    \/\/\u4ece\u8be6\u60c5\u9875\u83b7\u53d6user\n                    getUser: function(user) {\n                        self.setState({\n                            user: user\n                        })\n                    },\n                }\n            })\n        }\n    }\n\n    render() {\n        if (this.state.user) {\n            return(\n                <View>\n                    <Text style={styles.list_item}>\u7528\u6237\u4fe1\u606f: { JSON.stringify(this.state.user) }<\/Text>\n                <\/View>\n            );\n        } else {\n            return (\n                <ScrollView style={styles.flex}>\n                    <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u2606 \u8c6a\u534e\u90ae\u8f6e\u6d4e\u5dde\u5c9b3\u65e5\u6e38<\/Text>\n                    <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u53f0\u6e7e3\u65e5\u6e38<\/Text>\n                    <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>\u2606 \u8c6a\u534e\u90ae\u8f6e\u5730\u4e2d\u6d778\u65e5\u6e38<\/Text>\n                <\/ScrollView>\n            );\n        }\n    }\n}\n\nconst USER_MODELS = {\n    1: { name: '\u5f20\u4e09', age: 23 },\n    2: { name: '\u674e\u56db', age: 25 }\n};\n\nclass Detail extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            id: null\n        };\n    }\n\n    componentDidMount() {\n        \/\/\u8fd9\u91cc\u83b7\u53d6\u4eceFirstPageComponent\u4f20\u9012\u8fc7\u6765\u7684\u53c2\u6570: id\n        this.setState({\n            id: this.props.id\n        });\n    }\n\n    _pressButton() {\n        const { navigator } = this.props;\n        if (this.props.getUser) {\n            let user = USER_MODELS[this.props.id];\n            this.props.getUser(user);\n        }\n\n        if (navigator) {\n            \/\/\u5f88\u719f\u6089\u5427\uff0c\u5165\u6808\u51fa\u6808~ \u628a\u5f53\u524d\u7684\u9875\u9762pop\u6389\uff0c\u5373\u53ef\u8fd4\u56de\u4e0a\u4e00\u4e2a\u9875\u9762\n            navigator.pop();\n        }\n    }\n\n    render() {\n        return(\n            <ScrollView>\n                <Text style={styles.list_item} >\u4f20\u9012\u8fc7\u6765\u7684\u7528\u6237id\u662f\uff1a{this.state.id}<\/Text>\n                <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >\u70b9\u51fb\u6211\u53ef\u4ee5\u8df3\u56de\u53bb<\/Text>\n            <\/ScrollView>\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex:{\n        flex:1,\n    },\n    list_item:{\n        height:40,\n        marginLeft:10,\n        marginRight:10,\n        fontSize:20,\n        borderBottomWidth:1,\n        borderBottomColor:'#ddd',\n        justifyContent:'center',\n    },\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Navigator\u7ec4\u4ef6\u521d\u63a2 \u4e00\u4e2a\u5e94\u7528\u5f80\u5f80\u662f\u7531\u591a\u529f\u80fd\u89c6\u56fe\u7ec4\u6210\uff01\u591a\u9875\u9762\u7684\u5207\u6362\uff1a\u8def\u7531\u6216\u5bfc\u822a \u5728RN\u4e2d\u4e13\u95e8\u8d1f\u8d23\u89c6\u56fe\u5207\u6362 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-486","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}