zoukankan      html  css  js  c++  java
  • RN导航栏使用

    import PropTypes from 'prop-types';
    import React, { Component } from 'react';
    import { NavigatorIOS, Text, TouchableHighlight, View ,AppRegistry,StyleSheet,AlertIOS} from 'react-native';
    class MyView extends Component {
        _handleBackPress() {
            this.props.navigator.pop();
        }
    
        _handleNextPress(nextRoute) {
            this.props.navigator.push(nextRoute);
        }
    
        render() {
            const nextRoute = {
                component: MyScene,
                title: 'Bar That',
                passProps: { myProp: 'bar' }
            };
            return(
                <TouchableHighlight onPress={() => this._handleNextPress(nextRoute)}>
                    <Text style={{marginTop: 200, alignSelf: 'center'}}>
                        See you on the other nav {this.props.myProp}!
                    </Text>
                </TouchableHighlight>
            );
        }
    
    }
    const styles = StyleSheet.create({
       content:{
       paddingTop:100
       }
    
    })
    
    export default class MyApp extends Component {
        _handleNextButtonPress(){
          // AlertIOS.alert("Be A Lert");
            this.refs.nav.push({
                component: MyScene,
                title: 'Login'
            });
        }
    
        render() {
    
            return (
                <NavigatorIOS
                    ref='nav'
                    initialRoute={{
                        component: MyView,
                        title: 'Foo This',
                        passProps: { myProp: 'foo' },
                        backgroundColor:'#00ff00',
                        rightButtonTitle: 'Add',
                        onRightButtonPress: () => this._handleNextButtonPress(),
                    }}
                    style={{flex: 1}}
                />
            );
        }
    }
    
    class MyScene extends Component {
        _onForward = () => {
            this.props.navigator.push({
                title: 'Scene123',
                component: MyScene,
            });
        }
        render() {
            return (
                <View style={styles.content}>
                    <Text>Current Scene: { this.props.title }</Text>
                    <TouchableHighlight onPress={this._onForward}>
                        <Text>Tap me to load the next scene</Text>
                    </TouchableHighlight>
                    <TouchableHighlight onPress={this._onForward}>
                        <Text>Tap me to load the next scene</Text>
                    </TouchableHighlight>
                    <TouchableHighlight onPress={this._onForward}>
                        <Text>Tap me to load the next scene</Text>
                    </TouchableHighlight>
                    <TouchableHighlight onPress={this._onForward}>
                        <Text>Tap me to load the next scene</Text>
                    </TouchableHighlight>
                </View>
            )
        }
    }
    AppRegistry.registerComponent('MyApp', () => MyApp);
    

     //完整的代码供小菜鸟直接copy使用,

  • 相关阅读:
    总结第一、二类斯特林数(模板)
    总结组合数的几种求法(模板)
    HDU5521 Meeting(dijkstra+巧妙建图)
    BZOJ4152 The Captain(dijkstra+巧妙建图)
    CF1194D 1-2-K Game (博弈论)
    JavaScript字符串的操作
    JavaScript基础–闭包
    JavsScript基础–声明提升
    JavaScript基础–作用域
    css基础(一)
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/9767275.html
Copyright © 2011-2022 走看看