ReactNative之基本组件02

// 滑块的初始值。这个值应该在最小值和最大值之间，默认值是0
value={4}
// 滑块的最小值（当滑块滑到最左侧时表示的值），默认为0
minimumValue={1}
// 滑块的最大值（当滑块滑到最右端时表示的值），默认为1
maximumValue={10}
// 滑块的最小步长，这个值应该在0到(最大值-最小值)之间，默认值为0
step={2}

// 滑块左侧轨道的颜色。在iOS上默认为一个蓝色的渐变色
// ios：滑块右侧区域的颜色。android：滑块左侧区域的颜色 
minimumTrackTintColor={'red'}
// ios：滑块左侧区域的颜色。android：滑块右侧区域的颜色
minimumTrackTintColor={'yellow'}

// 给滑块设置一张图片，只支持静态图片
thumbImage={require('./image/slider.png')}
// 给轨道设置一张背景图。只支持静态图片。图片最中央的像素会被平铺直至填满轨道
trackImage={require('./image/slider1.png')}
// 指定一个滑块左侧轨道背景图，仅支持静态图片。图片最右边的像素会被平铺直至填满轨道
minimumTrackImage={require('./image/left.png')}
// 指定一个滑块右侧轨道背景图，仅支持静态图片。图片最左边的像素会被平铺直至填满轨道
maximumTrackImage={require('./image/right.png')}

// 滑块颜色
thumbTintColor={'orange'}

// 用户松开滑块的时候调用此回调，无论值是否变化。回调值为当前值
onSlidingComplete={() => {}}

在用户拖动滑块的过程中不断调用此回调
onValueChange={() => {}}

// 指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
animated bool

// 是否隐藏状态栏
hidden bool

// 设置状态栏文本的颜色, 可选值: enum('default', 'light-content', 'dark-content')
barStyle={'light-content'}

// 设定网络活动指示器(就是那个菊花)是否显示在状态栏
networkActivityIndicatorVisible={true}

// 通过 hidden 属性来显示或隐藏状态栏时所使用的动画效果，有两种选择：fade（默认值）、slide
showHideTransition={'fade'}

// Android 设备上状态栏的背景颜色
backgroundColor={'blue'}

translucent={true}

// 显示弹窗的方法
static alert(title, message?, buttons?, options?, type?)


// 显示弹窗
_shwoAlert() {
    Alert.alert(
        '标题',
        '弹窗提示信息',
        [
            {text: '稍后再说', onPress: () => console.log('稍后再说'), style: 'default'},
            {text: '取消', onPress: () => console.log('取消'), style: 'cancel'},
            {text: '确定', onPress: () => console.log('确定'), style: 'destructive'}
        ],
        { cancelable: false }
    )
}

componentDidMount() {
    // 添加监听
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
  // 移除监听
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
  }

  handleBackPress = () => {
    this.goBack(); 
    return true;
  }
  
  // 退出当前应用
  static exitApp()

static getString()
// 获取剪贴板的文本内容。返回一个Promise，然后你可以用下面的方式来读取剪贴板内容。

async _getContent() {
  var content = await Clipboard.getString();
}


static setString(content)
// 设置剪贴板的文本内容，然后你可以用下面的方式来设置剪贴板内容。

_setContent() {
  Clipboard.setString('hello world');
}

// 静态方法,在用户交互和动画结束以后执行任务, 返回一个可取消的 promise
runAfterInteractions(task)  

// 静态方法，创建一个句柄(处理器)，通知管理器，某个动画或者交互开始了
createInteractionHandle() 

// 静态方法，进行清除句柄，通知管理器，某个动画或者交互结束了。
clearInteractionHandle(handler:Handle)  

// 设置延迟时间，该会调用setTimeout方法挂起并且阻塞所有没有完成的任务，然后在eventLoopRunningTime到设定的延迟时间后，然后执行setImmediate方法进行批量执行任务
setDeadline(deadline:number) 

// 事件
Events:CallExpression
// 监听
addListener:CallExpression

InteractionManager.runAfterInteractions(() => {
    navigator.push({
        component: MainPager,
        name: 'MainPager'
    })
})

// 或者设置state
componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({renderPlaceholderOnly: false});
    });
}

//用来加载一个指定事件的事件监听器
static addListener(eventName, callback)

//移除某个类型事件的监听函数
static removeListener(eventName, callback)

//移除某个类型事件的所有监听函数
static removeAllListeners(eventName)

//把弹出的键盘收回去，同时使当前的文本框失去焦点
static dismiss()

componentWillMount() {
    // 监听键盘弹出时间
    this.keyboardShow = Keyboard.addListener('keyboardWillShow', this._keyboardDidShow)
}

componentWillUnmount() {
    this.keyboardShow.remove()
}

_keyboardDidShow = (event) => {
    console.log(event)
}