复习reactnative....

import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
    Image,
    View,
    TextInput,
    ScrollView,
    FlatList,
    SectionList,
    StyleSheet,
} from 'react-native';

export default class Test extends Component{

    render(){
        return(
            // <View style={styles.container}>
            //     HelloWorld
            //     <Text>hello,Jim!</Text>


            //     Props（属性）
            //     <Image source={require('../image/baidu.png')} style={{width: 600, height: 200}} />
                
            //     <Greeting name='Leslie' />
            //     <Greeting name='Harold-hua' />
            

            //     <Blink text='cs' />

            //     样式
            //     <Text style={styles.red}>red</Text>

            //     宽高
            //     <View style={{width:50,height:50,backgroundColor:'skyblue'}} />

            //     <View style={{flex:1}}>
            //          <View style={{flex:1,backgroundColor:'skyblue'}} />
            //          <View style={{flex:1,backgroundColor:'blue'}} />
            //          <View style={{flex:3,backgroundColor:'red'}} />
            //          <View style={{flex:2,backgroundColor:'#000'}} />
            //          <View style={{flex:1,backgroundColor:'skyblue'}} />
            //     </View>


            //     使用Flexbox布局
            //     <View style={{flex:1, flexDirection:'column', justifyContent:'space-between'}}>
            //          <View style={{width:50, height:50, backgroundColor:'red'}}></View>
            //          <View style={{width:50, height:50, backgroundColor:'blue'}}></View>
            //     </View>

            //     <View style={{flex:1, flexDirection:'column', justifyContent:'space-between',alignItems:'center'}}>
            //          <View style={{width:50, height:50, backgroundColor:'red'}}></View>
            //          <View style={{width:50, height:50, backgroundColor:'blue'}}></View>
            //     </View>

            
            //     <View style={{flex:1, flexDirection:'column', justifyContent:'space-between',alignItems:'center'}}>
            //          <View style={{width:50, height:50, backgroundColor:'red'}}></View>
            //          <View style={{width:50, height:50, backgroundColor:'blue'}}></View>
            //     </View>
            //     <PizzaTranslator />


            //     使用滚动视图
            //     <IScrolledDownAndWhatHappenedNextShockedMe />


            //     使用长列表1
            //     <FlatListBasics />
            //     使用长列表2
            //     <SectionListBasics />

            // </View>

            <View style={styles.container}>
                
            </View>
        );
    }
}

//State（状态）
// class Greeting extends Component{
//     render(){
//         return(
//             <Text>Hello,{this.props.name}!</Text>
//         );
//     }
// }

// class Blink extends Component{
//     constructor(shuxing){
//         super(shuxing);
//         this.state = {
//             showText: true
//         };
//         setInterval(
//             () => {
//                 this.setState(funName => {
//                     return{
//                         showText: !funName.showText
//                     };
//                 });
//             }, 1000
//         );
//     }
//     render(){
//         let display = this.state.showText ? this.props.text:' ';
//         return(
//             <Text>{display}</Text>
//         );
//     }
    // constructor(props){
    //     super(props);
    //     this.state = {
    //         showText: true
    //     };
    //     setInterval(() =>{
    //         this.setState(previousStatess => {
    //             return { 
    //                 showText: !previousState.showText
    //             };
    //         });
    //     }, 1000);
    // }
    // render(){
    //     let display = this.state.showText ? this.props.text:' ';
    //     return(
    //         <Text>{display}</Text>
    //     );
    // }
// }


//处理文本输入
// class PizzaTranslator extends Component{
//     constructor(props){
//         super(props);
//         this.state={
//             text:''
//         };
//     }
//     render(){
//         return(
//             <View style={{padding: 10}}>
//                 <TextInput 
//                     style={{height:40}}
//                     placeholder="提示"
//                     onChangeText={(text)=>this.setState({text})}
//                 />
//                 <Text style={{padding:10, fontSize:42}}>
//                     {this.state.text.split(' ').map((word)=>word&& '🍕').join(',')}
//                 </Text>
//             </View>
//             //(text)=>this.setState({text}) 把改变的值赋给text并传参到构造函数设置状态text的值。
//             // split(' ') 通过空格分割输入
//             //map((word)=>word&& '🍕')输入的字母转换成🍕
//             //join(',')通过创建,分割输出
//         );
//     }
// }

//使用滚动试图
// class IScrolledDownAndWhatHappenedNextShockedMe extends Component{
//     render(){
//         return(
//             //horizontal={true}水平滚动
//             <ScrollView horizontal={true}>
//                 <Text style={{fontSize:32}}>Scroll me plz</Text>
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Text style={{fontSize:32}}>If you like</Text>
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Text style={{fontSize:32}}>Scrolling down</Text>
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Text style={{fontSize:32}}>What's the best</Text>
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//                 <Image source={require('../image/favicon.png')} />
//             </ScrollView>
//         );
//     }
// }


//使用长列表1
// class FlatListBasics extends Component{
//     render(){
//         return(
//             <FlatList
//                 data={[
//                     {key: 'Devin'},
//                     {key: 'Jackson'},
//                     {key: 'James'},
//                     {key: 'Leslie'},
//                     {key: 'Jim'},
//                     {key: 'Harold'},
//                     {key: 'Devin1'},
//                     {key: 'Jackson1'},
//                     {key: 'James1'},
//                     {key: 'Leslie1'},
//                     {key: 'Jim1'},
//                     {key: 'Harold1'},
//                     {key: 'Jim2'},
//                     {key: 'Jim3'},
//                     {key: 'Jim4'},
//                     {key: 'Jim5'},
//                     {key: 'Jim6'},
//                     {key: 'Jim7'},
//                     {key: 'Jim8'},
//                     {key: 'Jim9'},
//                     {key: 'Jim10'},
//                     {key: 'Jim11'},
//                     {key: 'Jim12'},
//                     {key: 'Jim13'},
//                     {key: 'Jim14'},
//                     {key: 'Jim15'},
//                     {key: 'Jim16'},
//                     {key: 'Jim17'},
//                     {key: 'Jim18'},
//                     {key: 'Jim19'},
//                 ]}
//                 renderItem={({item})=><Text style={styles.item}>{item.key}</Text>}
//                 />
          
//         );
//     }
// }

//使用长列表2
// class SectionListBasics extends Component {
//     render(){
//         return(
            
//             <SectionList
//                 sections={[
//                     {title: 'D',data: ['Devin']},
//                     {title: 'J',data: ['Jim1','Jim2','Jim3','Jim4','Jim5','Jim6']},
//                 ]}
//                 renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
//                 renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
//             />
//             //renderItem显示标题
//             //renderSectionHeader显示内容数据
//         );
//     }

// }



const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },

    //样式
    // red:{
    //     color: 'red',
    // },

    
    //使用长列表1
    // item: {
    //     padding: 10,
    //     fontSize: 18,
    //     height: 44,
    // },
    
    //使用长列表2
    // sectionHeader: {
    //     paddingTop: 2,
    //     paddingLeft: 10,
    //     paddingRight: 10,
    //     paddingBottom: 2,
    //     fontSize: 14,
    //     fontWeight: 'bold',
    //     backgroundColor: 'rgba(247,247,247,1.0)',
    // },
    // item: {
    //     padding: 10,
    //     fontSize: 18,
    //     height: 44,
    // },
})