第三章 组件

1.Text

• number of lines （显示几行）

2.TextInput

• 1.autoCapitalize

  • characters: 所有的字符。
  • words: 每个单词的第一个字符。
  • sentences: 每句话的第一个字符（默认）。
  • none: 不自动切换任何字符为大写。
  • autoCorrect 自动修正
  • maxLength 限定输入范围
  • multiline 为true 输入多行
  • placeholder 设置文本框默认值
  • secureTextEntry 文字输入显示小圆点
  • selectionColor 设置光标颜色
  • editable true 为可编辑, false为不可编辑
  • value
  • defaultValue
    3.keyboard

• keyboardType 决定弹出何种软键盘的类型（下面这些值在所有平台都可用：）

  • default
  • numeric
  • email-address
  • phone-pad

• returnkeyType( 设置返回键类型, 以下这些跨平台使用)

  • done
  • go
  • next
  • search
  • send

• Image ( 本地装载图片 )

<Image source={require('./images/home_selected.png')} style={styles.image} />

• Image ( 用混合App的图片资源 )

未成功

• TouchableHighLight ( 设置高亮 )

  • underlayColor 背景色
  • activeOpacity 透明度

• TouchableNativeFeedback ( 点击显示一个不透明的圆型区域 )

• TouchableOpacity ( 点击使元素降低透明度 ),可以activeOpacity控制透明色.

• ListView （程序创建数据）

  export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      dataSource: ds.cloneWithRows(this.genRows()),
    };
  }

  genRows() {
    var dataBlob = []
    for(var i = 0 ; i < 20 ; i++) {
      var pressedText = 'item' + i;
      dataBlob.push(pressedText)
    }

    return dataBlob
  }
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

• Switch ( checkbox )
  • disabled
  • onTintColor (开启状态时的背景颜色)
  • thumbTintColor ( 开关上圆形按钮的背景颜色 )
  • tintColor ( 关闭状态时的边框颜色(iOS)或背景颜色(Android) )

   export default class AwesomeProject extends Component {
 constructor(props) {
   super(props)
   this.state = {
     switchState1: true
   }
 }
 render() {
   return (
     <View>
       <Switch onValueChange={this.onValueChange.bind(this)} value={this.state.switchState1} />
     </View>
   );
 }
 
 onValueChange(value) {
   this.setState({
     switchState1: value
   })

   alert(this.state.switchState1)
 }
}

Event

• onPress( 按下， 短按 )
• onLongPress（长按）
• onLayout（获取当前元素的坐标和自身宽高等）
• onChange ( 当文本框内容变化时调用此回调函数 )
• onChangeText ( 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 )