RN入门练习Demo

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  FlatList,
  ScrollView,
  Image,
  SectionList,
  Button,
  Alert,
} from 'react-native';
import {
  StackNavigator,
  TabNavigator,
} from 'react-navigation';
import RootNavigator from './MyNav';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
/*----------------state 和 props 屬性------
class Blink extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
    setInterval(() => {
      this.setState(previousState => {
        return {show: !previousState.show};
      });
    },1000);
  }
  render() {
    let message = this.state.show ? this.props.text : '';
    return (
      <Text>{message}</Text>
      );
  }
}
class ShowBlink extends Component<{}> {
  render() {
    return (
    <View style = {styles.container}>
    <Blink text= "this is test "/>
    </View>
    
    );
  }
}
*/
/*按比例分佈，默認豎直方向
  class LotsOfStyles extends Component<{}> {
  render() {
    return (
       <View style = {{flex: 1}}>
        <Text style={styles.flexone}>just red</Text>
        <Text style={styles.flextwo}>just bigblue</Text>
        <Text style={[styles.bigblue, styles.red, styles.flexthree]}>bigblue, then red</Text>


      </View>
      );
  }
 }
*/
 
 /*以空格結尾是一段話，每段話都轉化為��
export default class InputTest extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }


  render() {
    return (
      <View style = {{padding: 10}}>
      <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
      <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '��').join(' ')}
        </Text>
      </View>
      );
  }
}
*/


/*scrollview 简单、基本使用
export default class MyScrollView extends Component<{}> {
  render() {
    return (
      <ScrollView >
      <Text style = {{fontSize: 40}}>first</Text>
      <Image source = {require('./image/Quiz_icon.png')} />
      <Image source = {require('./image/Quiz_icon.png')} />
      <Text style = {{fontSize: 60, color: 'blue'}}>Second</Text>
      <Image source = {require('./image/treasure_hunting_annotation_icon.png')}/>
      <Image source = {require('./image/treasure_hunting_annotation_icon.png')}/>
      <Text style = {{fontSize: 80, color: 'red'}}>Three</Text>
      <Image source = {require('./image/test.png')} />
      <Image source = {require('./image/test.png')} style = {{width: 240, height: 150}} />
      </ScrollView>
      );
  }
}
*/
/*长列表（listview）类型的FlatList简单使用


 const myListData = [
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ];
export default class MyListViewDemo extends Component<{}> {
  render() {
    return (
      <View style = {styles.container}>
      <FlatList
      data = {myListData}
      renderItem = { ({item}) =>
      <View style = {styles.flesone}>
      <Image source = {require('./image/test.png')} style = {{alignItems: 'center'}}/>
      <Text style = {styles.item} >{item.key}</Text>
      </View>
        
      }
      />
      </View>
      );
  }
}
*/






/*长列表（listview）类型的sectionlist简单使用
const sectionListData = [
{title: {name: 'Jo', age: 20}, data:  [
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]},
{title: {name: 'XYF', age: 30}, data:  [
            {key: 'XYF_SSS'},
            {key: 'XYF_Jackson'},
            {key: 'XYF_James'},
            {key: 'XYF_Joel'},
          ]},
];




export default class MySectionListDemo extends Component<{}> {
  render() {
    return (
      <View style = {styles.flexone}>
        <SectionList
          sections = {sectionListData}
          renderItem = {({item}) => 
          <Text style = {{color: 'red', fontSize: 20}}>
          {item.key}
          </Text> 
        }
          renderSectionHeader = {({section}) =>
          <Text style = {{fontSize: 30, marginLeft: 100}}>
          {section.title.name}
          </Text>}
        />
      </View>
      );
  }
}
*/


/*使用自带 api 的简单的网络请求
const onButtonPress = () => {
   fetch("https://api.shopins.co/backend/index.php/shopins_api_android/get_customer_setting")
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson.status);
      Alert.alert(responseJson.status);
      return responseJson.status;
    })  
    .catch((error) => {
      console.error(error);
    });


};
  class MyNetDemo extends Component<{}> {
  myPress = () => {
     
  };


  render() {
    return (
      <Button onPress = {onButtonPress}  title = "点击我" style = {{height: 50}}/>
      );
  }
}
*/






/*导航栏的使用




export default class MainScreen extends Component<{}> {
   
  render() {


    return (
      <RootNavigator />
    );
  }
}
*/


/*可点击 可长按demo
import {
 TouchableHighlight,
 TouchableOpacity
} from "react-native"
export default class MyTouchDemo extends Component<{}> {
 _onPressButton() {
  console.log("u tapped the button")
 }
 render() {
  return (
   <View style = {styles.container}> 
   <TouchableHighlight onPress = {this._onPressButton}>
   <Text>Button</Text>
   </TouchableHighlight>
   <TouchableHighlight onPress = {() => Alert.alert("测试")}>
   <Text>My Test </Text>
   </TouchableHighlight>
   <TouchableOpacity onLongPress = {() => Alert.alert("这是长按效果")}>
    <Text>改变通明度</Text>
   </TouchableOpacity>
   </View>
   );
 }
}
*/
/*动画简单 demo
import FadeInView from "./FadeInView";
export default class MyAnimatedDemo extends Component<{}> {
 render() {
  return (
   <FadeInView style = {{width: 250, height: 50, backgroundColor: 'powderblue'}}>
   <Text style = {{fontSize: 28, textAlign: 'center', margin: 10}}>
   Fading in
   </Text>
   </FadeInView>
   );
 }
}
*/




/*LayoutAnimation动画的简单使用
import {
 NativeModules,
 LayoutAnimation,
 TouchableOpacity,
} from "react-native"
//如果是安卓使用LayoutAnimation，必须要有一下代码
const {UIManager} = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&
  UIManager.setLayoutAnimationEnabledExperimental(true);


export default class MyLayoutAnimationDemo extends Component <{}> {
   constructor(props) {
    super(props)
    this.state = {
     w: 100,
     h: 100,
    };
   }
   _onPress = () => {
    LayoutAnimation.spring();
    this.setState({
     w: this.state.w + 15, 
     h: this.state.h + 15,
    });
   }
   render() {
    return (
     <View style = {styles.container}>
     <View style = {[styles.box, {width: this.state.w, height: this.state.h}]}/>
     <TouchableOpacity onPress = {this._onPress}>
      <View style = {styles.button}>
        <Text style = {styles.buttonText}>Press me!</Text>
      </View>
     </TouchableOpacity>
     </View>
     );
   }
}
*/


/*4 定时器的简单使用
export default class MyTimer extends Component<{}> {
 constructor(props) {
  super(props)
  this.state = {
   number : 0,
  };
 }
 componentDidMount() {
  this.timer = setTimeout(() => {
   this.setState ({
    number: this.state.number + 1
   });
   },500);
 }
 componentWillUnmount() {
  this.timer && clearTimeout(this.timer);
 }
  render() {
    return (
     <View style = {styles.container}>
     <Text style = {{fontSize: 30}}>{this.state.number} </Text>
     </View>
     );
  }
}
*/


/*接入原生模块*/
import { NativeModules} from 'react-native'
/*访问原生模块的方法
 var MyModules = NativeModules.MyModules;
 MyModules.showInfo();
 MyModules.addEvent('Birthday Party', '4 Privet Drive, Surrey');
 */
 /*访问原生模块的常量
 var MyLet = NativeModules.MyLet;
 console.log("!!!!!!!!!:"MyLet.TestLet);
 */
 /*接入原生模块的通知
import {NativeEventEmitter} from 'react-native';
const {NotificationManager}  = NativeModules;
const calendarManagerEmitter = new NativeEventEmitter(NotificationManager);
*/
/*
const subscription = calendarManagerEmitter.addListener(
  'EventReminder',
  (reminder) => console.log("-------SO:"reminder.name)
);
calendarManagerEmitter.showEmitte();
export default class MyNativeView extends Component<{}> {
 render() {
   return (
    // <Text>{MyLet.TestLet}</Text>
    <Text>asdaiudhaiuhdaishiu</Text>
    );
 }
}
*/


// init 生成代碼
class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}




/*标签栏 tabbar 的简单使用
class MyTabBarItem extends Component<{}> {
    render(){
     var icon = this.props.active ? this.props.selectImage : this.props.normalImage;
 
        return (
            <Image source={icon}
            style={{tintColor: this.props.tintColor, width: 25, height: 25}}/>
        );
    }
}
const SimpleApp = TabNavigator({
    Home: {
        screen: App,
        navigationOptions: ({navigation}) => ({
            tabBarVisible: true,
            tabBarLabel: '首页',
            tabBarIcon: ({focused, tintColor})=>(
                <MyTabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    selectImage= {require('./image/test.png')}
                    normalImage={require('./image/test.png')}
                />
            ),
        })
    },


    Detail: {
        screen: App,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '消息',
            tabBarIcon: ({focused, tintColor})=>(
                <MyTabBarItem
                    tintColor={tintColor}
                selectImage= {require('./image/test.png')}
                    normalImage={require('./image/test.png')}
                />
            ),
        })
    },


    Three: {
        screen: App,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor})=>(
                <MyTabBarItem
                    tintColor={tintColor}
                    focused={focused}
                     selectImage= {require('./image/test.png')}
                    normalImage={require('./image/test.png')}
                />
            ),
        })
    }
},{
    tabBarPosition:'bottom',
    swipeEnabled:false,
    animationEnabled:false,
    lazy:true,
    tabBarOptions:{
        activeTintColor:'red',
        inactiveTintColor:'black',
        style:{backgroundColor:'#fff',},
        labelStyle: {
            fontSize: 16, // 文字大小
        },
    }
})
export default class MyTabbar extends Component<{}> {
 render () {
  return (
   <SimpleApp/>
   );
 }
}


*/


/*drawerNavigator 抽屉视图/侧栏视图简单使用
import { DrawerNavigator } from 'react-navigation';
const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);


const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile Screen</Text>
  </View>
);




const RootDrawer = DrawerNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: ({ tintColor, focused }) => (
        <Image source={require('./image/test.png')}
            style={{tintColor: tintColor, width: 25, height: 25}}/>
      ),
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      drawerLabel: 'Profile',
      drawerIcon: ({ tintColor, focused }) => (
       <Image source={require('./image/test.png')}
            style={{tintColor: tintColor, width: 25, height: 25}}/>
      ),
    },
  },
});
export default class MyDrawerNavigator extends Component<{}> {
 render () {
  return (
    <RootDrawer/>
   );
 }
}
*/




const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  flexone: {
    flex: 1, 
    backgroundColor: 'powderblue',
  },
  flextwo: {
    flex: 2,
    backgroundColor: 'skyblue',
  },
  flexthree:{
    flex: 3,
    backgroundColor: 'steelblue',
  },
  bigblue: { 
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red'
  },
  item: {
    alignItems: 'center', 
    padding: 10,
    fontSize: 20,
    height: 44,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  box: {


   width: 200,
   height: 200,
   backgroundColor: 'red',
  },
  button: {
   backgroundColor: 'black',
   paddingHorizontal: 20,
   paddingVertical: 15,
   marginTop: 15,
  },
  buttonText: {
   color: '#fff',
   fontWeight: 'bold',
  }

});

//FadeInView.js

import React, { Component } from 'react';
import {
Animated,
Alert,
} from "react-native";


export default class FadeInView extends Component<{}> {
constructor(props) {
super(props);


this.state = {
//透明度初始化值为0
fadeAnim: new Animated.Value(0),
};
}
 
componentDidMount() {


//随时间变化执行的动画
Animated.timing(this.state.fadeAnim, {
//目标量，透明度是1，就是完全不透明
toValue: 1,
//动画时间
duration: 3000,
}).start();
}
 
render() {


return (
<Animated.View 
style = {{...this.props.style, 
opacity: this.state.fadeAnim,}}
>
{this.props.children}
</Animated.View>
);


}
}




//MyNav.js

 import React, { Component } from 'react';
import {
  Button,
  Text,
  View,
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';


 const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</T·ext>
    <Button
      onPress={() => navigation.navigate('Third')}
      title="Go to details"
    />
  </View>
);


const DetailsScreen = ({navigation}) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
    <Button title = "去我自己自定义的"
    onPress = {() => 
     navigation.navigate('Third')}
     />
  </View>
);


 
const ThirdScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>这是我自己</Text>
  </View>
);


const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: 'Home',
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: 'Details',
    },
  },
   Third: {
    screen: ThirdScreen,
    navigationOptions: {
      headerTitle: '这是我自己',
    },
  },
});




export default RootNavigator;