NavigatorIOS学习

NavigatorIOS

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS,
  TouchableHighlight,
} from 'react-native';


class FirstPage extends Component {
  //引入propTypes 为了当向 props 传入无效数据时，JavaScript 控制台会抛出警告。为了验证传入数据的有效性。只在开发环境验证propTypes
  static propTypes = {
    route: PropTypes.shape({
      title: PropTypes.string.isRequired
    }),
    navigator: PropTypes.object.isRequired
  };
  
  render () {
    const vc = {
      component:SecondPage,
      title:'跳转的页面'
    };

    return (
      <View style={{flex:1}}>
        <TouchableHighlight  onPress={ ()=>{this.props.navigator.push(vc)} } >
          <Text style={{backgroundColor:'red'}}> 点击 push</Text>
        </TouchableHighlight>
        
      </View>
    )
  }
}

class SecondPage extends Component {
  render () {
    return (
      <View style={[styles.container,{backgroundColor:'cyan'} ]}>
        <TouchableHighlight onPress={()=> {this.props.navigator.pop() } } >
          <Text style={{backgroundColor:'red'}}>点击pop</Text>
        </TouchableHighlight>


      </View>
    )
  }
}


export default class navigatorStudy2 extends Component {
  render() {
    return (
      <NavigatorIOS
      //导航的初始route
        initialRoute={{     
          component:FirstPage,    //要跳转的板块
          title:'第一页',
          backButtonTitle:'左边',
          rightButtonTitle:'右边',  //实例化右边按钮
          onRightButtonPress: ()=>{alert("右边")},//右边按钮点击事件
        }}
        style={{flex: 1}}  // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
        //属性
        // navigationBarHidden={true} //隐藏导航栏
        shadowHidden={true} //隐藏导航栏下面的阴影
        tintColor='orange' //按钮颜色
        titleTextColor='black' //导航栏标题的文字颜色
        translucent={false}  //是否半透明（当不半透明时，页面会向下移动导航栏登高的距离，以防止内容被遮盖）
        interactivePopGestureEnabled={true} //决定是否启用滑动返回手势
      ></NavigatorIOS>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('navigatorStudy2', () => navigatorStudy2);

图片

 {/*//本地图片*/}
          <Image source={require('./resource/icon_index_05.png')} style={{ width: 40, height: 40 }}></Image>

          {/*// 网络图片*/}
          <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
                 style={{width:80,height:80}}
          ></Image>
         {/*网络图片请求参数*/}
          <Image
              source={{
                uri: "https://facebook.github.io/react/logo-og.png",
                method: "POST",
                headers: {
                  Pragma: "no-cache"
                },
                body: "Your Body goes here"
              }}
              style={{ width: 100, height: 80 }}
          />