diff --git a/README.md b/README.md
index 5864fda..744f292 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,4 @@
# react-native-yui
-**Still under developing, do NOT use**
-
此项目志在提供一个性能高、功能全、简单易用、iOS/Android通用的UI库，造福RN开发者。
对于此项目应该囊括哪些组件，我们有以下考虑：
@@ -19,7 +17,7 @@
1. [Text](https://facebook.github.io/react-native/docs/text.html)
-2. [TextInput](https://facebook.github.io/react-native/docs/textinput.html)
+2. [TextInput](https://facebook.github.io/react-native/docs/textinput.html)
3. [Image](https://facebook.github.io/react-native/docs/image.html)
@@ -51,9 +49,20 @@
待实现
-16.
+16. **ExtendibleTextInput**
+
+ 可拉伸的TextInput,可以识别Textinput内容的大小自动向下拉伸.
+
+
+ Prop | Default | Type | Description|
+ ------------ | ------------- | ------------ | -----------
+ maxHeight | null | number | 可拉伸到的最大长度 |
+ onHeightExtended | - | func | 当高度拉伸时的回调,返回新高度,变化之前高度,高度差|
+
+ TODO: 可调节行高,行间距.
-
+
+
#### 控制组件
diff --git a/demo/Demo.js b/demo/Demo.js
index d3cba75..cfbd389 100644
--- a/demo/Demo.js
+++ b/demo/Demo.js
@@ -12,9 +12,7 @@ import ButtonDemo from './demos/ButtonDemo';
import ViewPagerDemo from './demos/ViewPagerDemo';
import TabBarDemo from './demos/TabBarDemo';
import MediaKitDemo from './demos/MediaKitDemo';
-
-
-
+import TextInputAutoGrowDemo from './demos/TextInputAutoGrowDemo';
export default class Demo extends Component {
render() {
@@ -57,5 +55,8 @@ export default class Demo extends Component {
if(route.name === 'MediaKit') {
return
}
+ if(route.name === 'TextInputAutoGrow') {
+ return
+ }
}
}
diff --git a/demo/demos/DemoList.js b/demo/demos/DemoList.js
index dfade4f..ff0ce66 100644
--- a/demo/demos/DemoList.js
+++ b/demo/demos/DemoList.js
@@ -42,6 +42,10 @@ const dataSource = ds.cloneWithRowsAndSections({
{
name: 'MediaKit',
desc: '媒体播放'
+ },
+ {
+ name: 'TextInputAutoGrow',
+ desc: '自动增长的TextInput'
},],
'Control Components': [
{
diff --git a/demo/demos/TextInputAutoGrowDemo.js b/demo/demos/TextInputAutoGrowDemo.js
new file mode 100644
index 0000000..af902c1
--- /dev/null
+++ b/demo/demos/TextInputAutoGrowDemo.js
@@ -0,0 +1,72 @@
+'use strict';
+
+import React, {Component} from 'react';
+import {
+ View,
+ Text,
+ScrollView
+} from 'react-native';
+
+import {TextInput} from 'react-native-yui';
+
+export default class Demo extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ maxHeight: null,
+ isExtendible: true,
+ newHeight: 0,
+ lastHeight: 0,
+ addedHeight: 0
+ };
+ }
+
+ render() {
+ return (
+
+ 欢迎使用
+ "ExtendibleTextInput"
+ {this.setState({isExtendible:!this.state.isExtendible})}}
+ style={{marginTop:20,alignSelf:'center'}}>点我切换拉伸模式
+ {this.state.isExtendible ? '拉伸' : '不可拉伸'}
+
+ {this.setState({newHeight,lastHeight,addedHeight})
+ }}
+ />
+
+ maxHeight :
+ {this.setState({maxHeight:event.nativeEvent.text})}}/>
+
+
+
+ NewHeight :
+ {this.state.newHeight}
+
+
+
+ LastHeight :
+ {this.state.lastHeight}
+
+
+
+ AddedHeight :
+ {this.state.addedHeight}
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/index.js b/index.js
index ea6fcb0..dc39780 100755
--- a/index.js
+++ b/index.js
@@ -10,7 +10,7 @@ var YUI = {
return ReactNative.Text;
},
get TextInput() {
- return ReactNative.TextInput;
+ return require('./library/ExtendibleTextInput').default;
},
get Image() {
return ReactNative.Image;
@@ -59,7 +59,7 @@ var YUI = {
},
get DatePicker() {
return ReactNative.DatePicker;
- }
-}
+ },
+};
module.exports = YUI;
diff --git a/library/ExtendibleTextInput.js b/library/ExtendibleTextInput.js
new file mode 100644
index 0000000..03e3309
--- /dev/null
+++ b/library/ExtendibleTextInput.js
@@ -0,0 +1,67 @@
+import React, {Component, PropTypes} from 'react';
+
+const {number, func, bool,string} = PropTypes;
+
+import {TextInput} from 'react-native';
+
+export default class ExtendibleTextInput extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ height: 0
+ }
+ }
+
+ _onChange(nativeEvent) {
+ if(this.props.onChange) {
+ this.props.onChange();
+ }
+ let newHeight = this.state.height;
+ if (nativeEvent.contentSize && this.props.isExtendible) {
+ newHeight = nativeEvent.contentSize.height;
+ if (this.props.maxHeight) {
+ if (this.state.height !== newHeight && newHeight <= this.props.maxHeight && this.props.onHeightExtended) {
+ this.props.onHeightExtended(newHeight, this.state.height, newHeight - this.state.height);
+ }
+ } else {
+ if (this.state.height !== newHeight && this.props.onHeightExtended) {
+ this.props.onHeightExtended(newHeight, this.state.height, newHeight - this.state.height);
+ }
+ }
+
+ }
+ this.setState({
+ height: newHeight
+ });
+ }
+
+ _getChangeHeight(height) {
+ if (this.props.maxHeight == null) {
+ return (height)
+ }
+ return Math.min(height, this.props.maxHeight);
+
+ }
+
+ render() {
+ return (
+ {console.log('---------------------------------onLayout');}}
+ style={[this.props.style,{height:Math.max(this._getChangeHeight(this.state.height),this.props.style.height)}]}
+ onChange={(event) => {this._onChange(event.nativeEvent)}}
+ />
+
+ )
+ }
+}
+
+ExtendibleTextInput.propTypes = {
+ maxHeight: string,
+ onHeightExtended: func,
+ isExtendible: bool
+};
+ExtendibleTextInput.defaultProps = {
+ maxHeight: null,
+ isExtendible: false
+};
\ No newline at end of file