tbom/examples/src/navigator/index.js

Taobao Open Platform Modules

import {createElement, Component} from 'rax';
import View from 'tboc-view';
import Text from 'tboc-text';
import styles from '../common/style.css';
import { navigator } from '../../../src/index';

const appkey = 23025092;

function pushWindowFunc () {
  navigator.pushWindow({
    url: "https://h5.m.taobao.com/lanlan/index.html",
    animated: true
  }, function(e) {
    console.log(JSON.stringify(e))
  })
}
function popWindowFunc () {
    navigator.popWindow({
      animated: true
    }, function (e) {
      console.log(JSON.stringify(e))
    })
}
function openWindowFunc () {
  navigator.openWindow({
    url: "https://h5.m.taobao.com/lanlan/index.html",
    animated: true,
    target: "_blank"
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function closeWindowFunc () {
  navigator.closeWindow({
    animated: true
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function showTitleFunc () {
  navigator.showTitle({
    animated: true
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function hideTitleFunc () {
  navigator.hideTitle({
    animated: true
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function setTitleFunc () {
  navigator.setTitle({
    title: "I am title",
    subTitle: "I am subtitle",
    icon: "//img.alicdn.com/tfs/TB1XlF3RpXXXXc6XXXXXXXXXXXX-16-16.png"
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function setLeftItemFunc () {
  navigator.setLeftItem({
    title: 'I am left'
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function setRightItemFunc () {
  navigator.setRightItem({
    title: 'I am right'
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function setStyleFunc () {
  navigator.setStyle({
    color: '#ffffff',
    backgroundColor: '#3388FF',
    borderBottomWidth:'3',
    borderBottomColor:'#F1F1F1'
  }, function (e) {
    console.log(JSON.stringify(e))
  })
}
function setStatusBarStyleFunc () {
  navigator.setStatusBarStyle({
    style: 'lightContent'
  }, function(e) {
    console.log(JSON.stringify(e))
  })
}
function pageVisibilityFunc () {
  console.log("N.pageVisibility", navigator.pageVisibility)
  console.log("N.pageVisibility")
  navigator.pageVisibility.watch(function(result){
    console.log(JSON.stringify(result))
  });
}

class NavigatorDemo extends Component {
  render() {
    return (
      <View style={styles.app}>
        <View clickable={true}onPress={pushWindowFunc} onClick={pushWindowFunc} style={demoStyles.button} >执行 pushWindow 方法</View>
        <View clickable={true}onPress={popWindowFunc} onClick={popWindowFunc} style={demoStyles.button}>执行 popWindow 方法</View>
        <View clickable={true}onPress={openWindowFunc} onClick={openWindowFunc} style={demoStyles.button}>执行 openWindow 方法</View>
        <View clickable={true}onPress={closeWindowFunc} onClick={closeWindowFunc} style={demoStyles.button}>执行 closeWindow 方法</View>
        <View clickable={true}onPress={showTitleFunc} onClick={showTitleFunc} style={demoStyles.button}>执行 showTitle 方法</View>
        <View clickable={true}onPress={hideTitleFunc} onClick={hideTitleFunc} style={demoStyles.button}>执行 hideTitle 方法</View>
        <View clickable={true}onPress={setTitleFunc} onClick={setTitleFunc} style={demoStyles.button}>执行 setTitle 方法</View>
        <View clickable={true}onPress={setLeftItemFunc} onClick={setLeftItemFunc} style={demoStyles.button}>执行 setLeftItem 方法</View>
        <View clickable={true}onPress={setRightItemFunc} onClick={setRightItemFunc} style={demoStyles.button}>执行 setRightItem 方法</View>
        <View clickable={true}onPress={setStyleFunc} onClick={setStyleFunc} style={demoStyles.button}>执行 setStyle 方法</View>
        <View clickable={true}onPress={setStatusBarStyleFunc} onClick={setStatusBarStyleFunc} style={demoStyles.button}>执行 setStatusBarStyle 方法</View>
        <View clickable={true}onPress={pageVisibilityFunc} onClick={pageVisibilityFunc} style={demoStyles.button}>执行 pageVisibilityFunc 方法</View>
      </View>
    );
  }
}

const demoStyles = {
  input: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid'
  },
  text: {
    paddingLeft: 20,
    paddingRight: 20
  },
  button: {
    borderWidth: 2,
    borderColor: '#CCC',
    borderStyle: 'solid',
    paddingLeft: 20,
    paddingRight: 20,
    marginTop: 40,
    backgroundColor: '#EEE'
  }
}

module.exports = NavigatorDemo;