HomeScreen.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. import React from "react";
  2. import {connect} from 'react-redux'
  3. import {View, Text, Button,TouchableHighlight,StyleSheet} from "react-native";
  4. import {changeBtnText} from "../../actions/bi/index";
  5. import YRHttpRequest from "../../utils/network/fetch"
  6. import {API} from "../../utils/network/axios/api.config";
  7. import {NativeModules} from 'react-native';
  8. const YRRnBridge = NativeModules.YRRnBridge;
  9. class HomeScreen extends React.Component {
  10. loadData=()=>{
  11. //fetch请求
  12. console.log("loadData():",API.TEST_GET);
  13. YRHttpRequest.get(API.TEST_GET).then(res=>{
  14. console.log("res.data=",res);
  15. }).catch(err=>{
  16. console.log("res.data=",err);
  17. })
  18. //axios请求
  19. // console.log("loadData():",API.TEST_GET);
  20. // sendGet({url:API.TEST_GET,params:{
  21. // name:'arison'
  22. // }}).then(res=>{
  23. // console.log("res.data=",res);
  24. // }).catch(err=>{
  25. // console.log("res.data=",err);
  26. // })
  27. }
  28. componentDidMount() {
  29. //适配iOS侧滑返回
  30. this.viewDidAppear = this.props.navigation.addListener( //类似OC里的 viewDidAppear方法
  31. 'didFocus',// 有4个取值 willFocus即将显示、didFocus完成显示、willBlur即将消失、didBlur消失
  32. (obj)=>{
  33. YRRnBridge.gestureEnabled(true);
  34. }
  35. )
  36. this.viewWillDisappear = this.props.navigation.addListener(//类似OC里的 viewWillDisappear方法
  37. 'willBlur', // 有4个取值 willFocus即将显示、didFocus完成显示、willBlur即将消失、didBlur消失
  38. (obj)=>{
  39. YRRnBridge.gestureEnabled(false);
  40. }
  41. )
  42. }
  43. componentWillUnmount() { // 移除监听
  44. this.viewDidAppear.remove();
  45. this.viewWillDisappear.remove();
  46. }
  47. render() {
  48. const {navigation} = this.props;
  49. return (
  50. <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
  51. <Text style={{marginBottom: 10}}>Home Screen</Text>
  52. <Button
  53. title="详情页"
  54. onPress={() => {
  55. navigation.navigate('Details', {name: '动态的'});
  56. }}
  57. />
  58. <Text style={{marginBottom: 10}}>{this.props.btnText}</Text>
  59. <Button title="更新文字"
  60. onPress={() => {
  61. this.props.changeText("我的第一个ReactNative项目!");
  62. }}/>
  63. <Button style={{marginBottom: 10}}
  64. title="断点调式" onPress={()=>{
  65. for (let i = 0; i < 10; i++) {
  66. console.log("i*i=",i*i);
  67. }
  68. }}/>
  69. <TouchableHighlight
  70. underlayColor="#FF00FF"
  71. activeOpacity={1}
  72. style={styles.button} onPress={this.loadData.bind(this)}>
  73. <Text style={styles.text} > Touch Here </Text>
  74. </TouchableHighlight>
  75. <Button title="iOS返回测试"
  76. onPress={() => {
  77. YRRnBridge.goBack();
  78. }}/>
  79. <Button title="热更新测试"
  80. onPress={() => {
  81. navigation.navigate('CodePushPage', {name: '热更新'});
  82. }}/>
  83. </View>
  84. );
  85. }
  86. }
  87. const styles = StyleSheet.create({
  88. container: {
  89. flex: 1,
  90. justifyContent: 'center',
  91. paddingHorizontal: 10
  92. },
  93. button: {
  94. alignItems: 'center',
  95. backgroundColor: '#DDDDDD',
  96. borderRadius:5,
  97. padding: 10,
  98. margin:10
  99. },
  100. countContainer: {
  101. alignItems: 'center',
  102. padding: 10
  103. },
  104. countText: {
  105. color: '#FF00FF'
  106. },
  107. text:{
  108. fontWeight:'600',
  109. color:'#FFFFFF'
  110. }
  111. })
  112. const mapStateToProps = state => ({
  113. btnText:state.pageMainReducer.btnText
  114. })
  115. const mapDispatchToProps = dispatch => ({
  116. changeText:(text)=>{
  117. dispatch(changeBtnText(text));
  118. }
  119. })
  120. export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)