* 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;