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 (
      {message}
      );
  }
}
class ShowBlink extends Component<{}> {
  render() {
    return (
   
   
   
    
    );
  }
}
*/
/*按比例分佈，默認豎直方向
  class LotsOfStyles extends Component<{}> {
  render() {
    return (
       
        just red
        just bigblue
        bigblue, then red


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


  render() {
    return (
     
                style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
     
          {this.state.text.split(' ').map((word) => word && '�').join(' ')}
       
     
      );
  }
}
*/


/*scrollview 简单、基本使用
export default class MyScrollView extends Component<{}> {
  render() {
    return (
     
      first
     
     
      Second
     
     
      Three
     
     
     
      );
  }
}
*/
/*长列表（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 (
     
            data = {myListData}
      renderItem = { ({item}) =>
     
     
      {item.key}
     
        
      }
      />
     
      );
  }
}
*/






/*长列表（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 (
     
                  sections = {sectionListData}
          renderItem = {({item}) => 
         
          {item.key}
           
        }
          renderSectionHeader = {({section}) =>
         
          {section.title.name}
          }
        />
     
      );
  }
}
*/


/*使用自带 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 (
     
      );
  }
}
*/






/*导航栏的使用




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


    return (
     
    );
  }
}
*/


/*可点击 可长按demo
import {
 TouchableHighlight,
 TouchableOpacity
} from "react-native"
export default class MyTouchDemo extends Component<{}> {
 _onPressButton() {
  console.log("u tapped the button")
 }
 render() {
  return (
    
   
   Button
   
    Alert.alert("测试")}>
   My Test
   
    Alert.alert("这是长按效果")}>
    改变通明度
   
   
   );
 }
}
*/
/*动画简单 demo
import FadeInView from "./FadeInView";
export default class MyAnimatedDemo extends Component<{}> {
 render() {
  return (
   
   
   Fading in
   
   
   );
 }
}
*/




/*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 (
     
     
     
     
        Press me!
     
     
     
     );
   }
}
*/


/*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 (
     
     {this.state.number}
     
     );
  }
}
*/


/*接入原生模块*/
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 (
    // {MyLet.TestLet}
    asdaiudhaiuhdaishiu
    );
 }
}
*/


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




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


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


    Three: {
        screen: App,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor})=>(
                                    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 (
   
   );
 }
}


*/


/*drawerNavigator 抽屉视图/侧栏视图简单使用
import { DrawerNavigator } from 'react-navigation';
const HomeScreen = () => (
 
    Home Screen
 
);


const ProfileScreen = () => (
 
    Profile Screen
 
);




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




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 (
style = {{...this.props.style, 
opacity: this.state.fadeAnim,}}
>
{this.props.children}

);


}
}




//MyNav.js

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


 const HomeScreen = ({ navigation }) => (
 
    Home Screen
          onPress={() => navigation.navigate('Third')}
      title="Go to details"
    />
 
);


const DetailsScreen = ({navigation}) => (
 
    Details Screen
   

    onPress = {() => 
     navigation.navigate('Third')}
     />
 
);


 
const ThirdScreen = () => (
 
    这是我自己
 
);


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




export default RootNavigator;