TextInput 구성 요소에 대한 자세한 소개

1. TextInput 구성 요소 소개

기본 입력 기능을 입력 상자로 구현하는 것 외에도 TextInput 구성 요소는 자동 확인, 자리 표시자, 팝업할 다양한 키보드 유형 지정과 같은 다양한 기능도 제공합니다.

2, 구성 요소 속성

(1) autoCapitalize: 첫 글자는 자동으로 대문자로 표시됩니다. 선택 값은 없음, 문장, 단어, 문자입니다.

(2)자리 표시자: 자리 표시자, 입력 전에 표시되는 텍스트 콘텐츠입니다.

(3)value: 텍스트 입력 상자의 기본값입니다.

(4)placeholderTextColor: 자리 표시자 텍스트의 색상입니다.

(5)password: true인 경우 비밀번호 입력란을 의미합니다. 텍스트는 "*"

로 표시됩니다. (6)multiline: true이면 여러 줄 입력을 의미합니다.

(7)편집 가능: 기본값은 true입니다. false로 설정하면 편집할 수 없다는 의미입니다.

(8)autoFocus: true이면 자동으로 포커스를 얻습니다.

(9)clearButtonMode: 지우기 버튼이 표시되는 시기를 나타냅니다. 선택 값은 다음과 같습니다: never, 편집하는 동안, 편집하지 않는 한, always.

(10)maxLength: 입력할 수 있는 최대 문자 수입니다.

(11)enablesReturnKeyAutomatically: 기본값은 false입니다. 텍스트를 입력하지 않을 때 Return 키를 사용할 수 없음을 나타내려면 true로 설정합니다.

(12)returnKeyType: 소프트 키보드 리턴 키 표시를 나타내는 문자열입니다. 선택 값은 default, go, google, join, next, route, search, send, yahoo, done, emergency-call입니다.

(13) secureTextEntry: 기본값은 false입니다. true인 경우 비밀번호 상자처럼 입력을 숨깁니다.

3, 컴포넌트 메소드

(1)onChange: 텍스트가 변경될 때 이 함수가 호출됩니다.

(2)onEndEditing: 편집이 끝나면 이 함수가 호출됩니다.

(3)onBlur: 초점이 상실될 때 트리거됩니다.

(4)onFocus: 포커스가 획득되면 트리거됩니다.

(5)onSubmitEditing: 편집을 마친 후 키보드의 제출 버튼을 클릭하면 이 이벤트가 트리거됩니다.

4, 사용예

(1) 렌더링

• 텍스트 입력 페이지에 TextInput을 추가하고 관련 자리 표시자 텍스트 및 스타일을 설정하세요.

• 입력 상자의 텍스트가 변경되면 아래 Text 구성 요소가 입력 텍스트의 길이를 실시간으로 계산하여 표시합니다.

• 입력창 오른쪽의 '검색' 버튼을 클릭하면 입력창 내용이 팝업됩니다.

(2) 샘플 코드

'react'에서 React, { Component } 가져오기<code class="js plain">;import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';

//输入框组件
class Search extends Component {
  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  //组件渲染
  render() {
    return (
      <View style={styles.flex}>
          <View style={[styles.flexDirection, styles.inputHeight]}>
            <View style={styles.flex}>
              <TextInput
style={styles.input}가져오기 {  AppRegistry,🎜  스타일시트,🎜  < code class="js plain">텍스트,🎜  보기, 🎜  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
가져오기 {
  AppRegistry,🎜  스타일시트,🎜  < code class="js plain">텍스트,🎜  보기, 🎜  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  스타일시트,🎜  < code class="js plain">텍스트,🎜  보기, 🎜  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  < code class="js plain">텍스트,🎜  보기, 🎜  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  보기, 🎜  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  TextInput,🎜} from 'react-native';< /code>🎜<div class="line number9 index8 alt2"> 🎜<div class="line number10 index9 alt1"><code class="js comments">//输入框组件🎜클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
클래스 검색 확장 구성 요소 {🎜   //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  //构造函数🎜  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  constructor(props) {🎜    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
    super< code class="js plain">(props);🎜     this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
    this.state = {text: ''}; 🎜  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  }🎜 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
 🎜  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  //组件渲染🎜  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
  render() {🎜    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
    반환 (🎜      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
      <보기 스타일={styles.flex}>🎜           <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
          <스타일 보기={[styles.flexDirection, styles.inputHeight]}>🎜            <보기 스타일={styles.flex}>🎜              <TextInput🎜                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
                style={styles.input}🎜 returnKeyType="search" placeholder="请输入关键字" onChangeText={(text) => this.setState({text})}/>             </View>             <View style={styles.btn}>               <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>             </View>           </View>           <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>       </View>     );   }     //搜索按钮点击   search(){     alert("您输入的内容为："+this.state.text);   } }   //默认应用的容器组件 class App extends Component {    render() {       return (         <View style={[styles.flex, styles.topStatus]}>          <Search></Search>         </View>       );    }  }   //样式定义 const styles = StyleSheet.create({   flex:{     flex: 1,   },   flexDirection:{     flexDirection:'row'   },   topStatus:{     marginTop:25,   },   inputHeight:{     height:45,   },   input:{     height:45,     borderWidth:1,     marginLeft: 5,     paddingLeft:5,     borderColor: '#ccc',     borderRadius: 4   },   btn:{     width:55,     marginLeft:-5,     marginRight:5,     backgroundColor:'#23BEFF',     height:45,     justifyContent:'center',     alignItems: 'center'   },   search:{     color:'#fff',     fontSize:15,     fontWeight:'bold'   },   tip:{     marginLeft: 5,     marginTop: 5,     color: '#C0C0C0',   } });   AppRegistry.registerComponent('HelloWorld', () => App);
returnKeyType="search"
placeholder="请输入关键字"
onChangeText={(text) => this.setState({text})}/>
            </View>
            <View style={styles.btn}>
              <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
            </View>
          </View>
          <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
      </View>
    );
  }

  //搜索按钮点击
  search(){
    alert("您输入的内容为："+this.state.text);
  }
}

//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={[styles.flex, styles.topStatus]}>
         <Search></Search>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
  search:{
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  tip:{
    marginLeft: 5,
    marginTop: 5,
    color: '#C0C0C0',
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

위 내용은 TextInput 구성 요소에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!