新建一组件 ImageEqualEnlarge.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
export default class AutoExpandingTextInput extends Component {
constructor(props) {
super(props);
this.state = {
text:'',
height:0
};
this.onChange=this._onChange.bind(this);
}
_onChange(event){
this.setState({
text:event.nativeEvent.text,
height:event.nativeEvent.contentSize.height,
});
}
render() {
return (
<TextInput {...this.props}
multiline={true}
onChange={this.onChange}
style={[styles.textInputStyle,{height:Math.max(35,this.state.height)}]}
value={this.state.text}
>
</TextInput>
);
}
}
const styles = StyleSheet.create({
textInputStyle:{
fontSize:40,
width:300,
height:30,
alignItems: 'center',
backgroundColor:'grey',
paddingTop:0,
paddingBottom:0
}
});
在index.android.js 引用
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Image,
Text,
TouchableHighlight,
TextInput,
StatusBar,
View
} from 'react-native';
import AutoExpandingTextInput from './AutoExpandingTextInput'
export default class ViewProject extends Component {
_onChangeText(newText) {
console.log('inputed text:' + newText);
}
render() {
return (
<View style={styles.container}>
<AutoExpandingTextInput
onChangeText={(newText)=>{this._onChangeText(newText)}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#F5FCFF'
}
});
AppRegistry.registerComponent('ViewProject', () => ViewProject);