React基础--处理文本输入

TextInput是一个允许用户输入文本的基础组件。它有两个属性：1.onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。2.onSubmitEditing的属性，会在文本被提交后调用。
代码实例：

import React,{useState} from 'react';
import { Text, TextInput, View} from 'react-nactive';
const PizzaTranslator=()=>{
  const [text,setText] = useState('');
  return (
     <View style={{padding:10}}>
        <TextInput
           style={{height:40}}
           placeholder="Type here to translate!"
           onChangeText={Text=>setTest(text)}
           defaultValue={text}
          />
          <Text style={{padding:10,fontSize:42}}>
             {text.split(' ').map((word)=>word && '12').join(' ')}
           </Text>
     </View>
   );
}
export default PizzaTraslator;

注意有些属性仅在multiline为true或者为false的时候有效，此外 multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor,borderLefWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput.
代码实例：

import React from 'react';
import {View,TextInput} from 'react-native';
function UselessTextInput(props){
  return (
    <TextInput  {...props}//将父组件传递来的所有props传递给TextInput;
    //比如下面的multiline和numberOfLines
    editable
    maxlength={40}  />
);
}
export default function UselessTextInputMultiline(){
  const [value,onChangeText]=React.useState('Useless Multiline Placeholder');
  //你可以试这输入一种颜色，比如red
  return (
    <View
      style={{backgroundColor:value,
      borderBottomColor:'#000000',
      borderBottomWidth:1,}}>
      <UseLessTextInput
          multiline
          numberOfLines={4}
          onChangeText={text=>onChangeText(tetx)}
          value={value} />
          </View>
  );
}

使用滚动视图

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动。

import React from 'react';
import {Image,ScrollView,Text} from 'react-native';
const logo={
   uri:'https://reactnative.dev/img/tiny_logo.png',
   width:64,
   height:64
};
export default App=()=>(
  <ScrollView>
      <Text style={{fontSize:96}}>Scroll me plz</Text>
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Text style={{fontSize:96}}>If you like</Tetx>
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
       <Text style={{fontSize:96}}>Scrolling down</Tetx>
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
       <Text style={{fontSize:96}}>what's the best</Tetx>
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Text style={{fontSize:80}}>React Native</Tetx>
      </ScrollView>
);

ScrollView适合用来显示数量不多的滚动元素，放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外. 如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。
FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同

FlatList更适合长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是date和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

如下例子创建一个简单的FlatList，并预设一些模拟数据。首先是初始化FlatList所需的data,其中的每一项数据之后都在renderitem中被渲染成了Text组件，最后构成整个FlatList:

import React from 'react'
import {FlatList,StyleSheet,Text,View} from 'react-native';
const styles=StyleSheet.create({
  container:{
    flex:1,
    paddingTop:22},
  item:{
    padding:10,
    fontSize:18,
    height:44,},
});
const FlatListBasics=()=>{
  return (
     <View style={styles.container}>
         <FlatList
             data={
             [
             {key:'Devin'},
              {key:'Devin1'},
               {key:'Devin2'},
                {key:'Devin3'},
                 {key:'Devin4'},
                  {key:'Devin5'},
                   {key:'Devin6'},
                    {key:'Devin7'},
                     {key:'Devin8'},
                      {key:'Devi2n'},]}
                renderItem={({ite})=><Text style={styles.item}>{item.key}</Text>}
                />
     </View>);}
     export default FlatListBasics;

如果要渲染的一组需要分组的数据，也许还带有分组标签的，那么SectionList将是一个不错的选择。

import React from 'react';
import {SectionList,StyleSheet,Text,View} from 'react-native';
const styles=StyleSheet.create({
  container:{
    flex:1,
    paddingTop:22},
  sectionHeader:{
    paddingTop:2,
    paddingLeft:10,
    PaddingRight:10,
    PaddingBottom:2,
    fontSize:14,
    fontWeight:'bold',
    backgroundColor:blue,},
    item:{
      padding:10,
      fontSize；18，
      height:44,},
})
sonst SectionListBasics = () =>{
  return(
    <View style={styles.container}>
       <SectionList 
           sections={[
              {title:'D',data:['Devin','Dan','Dominic']},
              {title:'J',data:['Jackson','James','jillian','Jimmy','Hoel','John']},
              ]}
             renderItem={({item})=><Text style={styles.item}>{item}</Text>}
             renderSectionHeader={({section})=><Text style={styles.sectionHeader}>{section.title}</Text>}
             keyExtractor={(item,index)=>index}
             />
             </View>
);
}