1.图表的设计以及全面屏

App.js

@@ -8,7 +8,7 @@
  */
 
 import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import {Platform, StyleSheet,View} from 'react-native';
 import CodePushPage from './units/components/pages/CodePushPage.js'
 const instructions = Platform.select({
     ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -20,16 +20,15 @@ const instructions = Platform.select({
 
 export default class App extends Component{
 
-
     render() {
 
-
         return (
             <View style={styles.container}>
                <CodePushPage />
             </View>
         );
     }
+
 }
 
 const styles = StyleSheet.create({

bundle/assets/app.json

@@ -1,4 +0,0 @@
-{
-  "name": "UU_RN",
-  "displayName": "UU_RN"
-}

package.json

@@ -8,10 +8,12 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "native-echarts": "^0.5.0",
     "react": "16.8.3",
     "react-native": "0.59.9",
-    "react-native-code-push": "^5.6.1",
+    "react-native-code-push": "5.6.1",
     "react-native-gesture-handler": "^1.3.0",
+    "react-native-orientation": "^3.1.3",
     "react-navigation": "^3.11.0",
     "react-redux": "^7.1.0",
     "redux": "^4.0.4",

units/components/commons/bi/BIChartsItem.js

@@ -0,0 +1,234 @@
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    Image,
+} from 'react-native';
+
+import {NativeModules} from 'react-native';
+const YRRnBridge = NativeModules.YRRnBridge;
+
+import Echarts from 'native-echarts';
+import Dimensions from 'Dimensions';
+import NavigationUtil from "../../navigator/NavigationUtil";
+const {width} = Dimensions.get('window');
+
+export  default  class BIChartsItem extends Component {
+
+
+    constructor(props) {
+        super(props);
+
+        const{typeTitle} = this.props;
+
+
+        const typeOptions = {
+
+            apple:[2, 4, 7, 2, 2, 7, 13, 16],
+            organ: [6, 9, 9, 2, 8, 7, 17, 18],
+            banana: [6, 9, 3, 2, 8, 7, 1, 8],
+
+        }
+
+        const option = {
+            title:{
+                text:'水果对比',
+                top:'0',
+                left:'10',
+                font:10,
+                textStyle:{
+
+                    fontSize: 18,
+                    color:'darkGray',
+
+
+                }
+
+            },
+            //点击某一个点的数据的时候，显示出悬浮窗
+            tooltip : {
+                trigger: 'axis'
+            },
+            //可以手动选择现实几个图标
+            legend: {
+                padding:[
+
+                    240,
+                    100,
+                    100,
+                    100,
+                ],
+                data:['苹果','橘子','香蕉']
+            },
+            //各种表格
+            toolbox: {
+                //改变icon的布局朝向
+                orient: 'horizontal',
+                show : false,
+                showTitle:true,
+                feature : {
+                    //show是否显示表格，readOnly是否只读
+                    dataView : {show: true, readOnly: true},
+                    magicType : {
+                        //折线图  柱形图    总数统计 分开平铺
+                        type: ['line', 'bar','stack','tiled'],
+                    },
+
+                }
+            },
+            xAxis : [
+                {
+                    //就是一月份这个显示为一个线段，而不是数轴那种一个点点
+                    boundaryGap:true,
+                    type : 'category',
+                    name : '时间',
+                    data : ['1月','2月','3月','4月','5月','6月','7月','8月']
+                }
+            ],
+            yAxis : [
+                {
+                    type : 'value',
+                    name : '销量(kg)'
+                }
+            ],
+            //图形的颜色组
+            color:['rgb(249,159,94)','rgb(67,205,126)','rgb(167,205,126)'],
+            //需要显示的图形名称，类型，以及数据设置
+            series : [
+                {
+                    name:'苹果',
+                    //默认显
+                    type:typeTitle,
+                    data:typeOptions.apple
+                },
+                {
+                    name:'橘子',
+                    type:typeTitle,
+                    data:typeOptions.organ
+                },{
+                    name:'香蕉',
+                    type:typeTitle,
+                    data:typeOptions.banana
+                }
+            ]
+        };
+
+
+
+        this.state = {
+
+            options:option,
+        }
+    }
+
+
+    _onPressAllScreen(){
+        
+
+        NavigationUtil.goPage(this.state.options,'AllScreenChart',)
+
+
+    }
+
+    render() {
+
+
+        return (
+            <View style={styles.cell_content}>
+
+                <View  style={styles.topView}>
+
+                    <Text style={styles.topView_title}>
+
+                        今年水果排行榜和种类
+
+                    </Text>
+
+
+                    <TouchableOpacity
+
+                        style = {styles.topView_touch}
+
+                        onPress={()=>this._onPressAllScreen()}
+
+
+                    >
+
+                        <Image style={styles.topView_image}
+
+                            source={{uri: 'bi_allScreen'}}
+
+                        >
+
+
+                        </Image>
+
+                    </TouchableOpacity>
+
+                </View>
+
+                <Echarts option={this.state.options} height={260} width={width}/>
+
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    cell_content:{
+
+        backgroundColor:'white',
+        padding:10,
+        marginTop:10,
+        marginLeft:10,
+        marginRight:10,
+        marginVertical:3,
+        borderColor:'#dddddd',
+        borderWidth:0.5,
+        borderRadius:8,
+        shadowColor:'gray',
+        shadowOffset:{width: 2,height: 2},
+        shadowOpacity:0.4,
+        shadowRadius:1,
+        elevation: 2,
+
+    },
+
+    topView:{
+
+        height: 30,
+        justifyContent:'space-between',
+        flexDirection:'row',
+
+    },
+
+    topView_title:{
+
+       fontSize:18,
+        color: '#333333',
+        height:30,
+        marginLeft: 10,
+        width:200,
+        lineHeight:30,
+
+    },
+    topView_touch:{
+
+        padding:1,
+        height:30,
+        width:30,
+
+
+    },
+    topView_image:{
+
+        marginTop:5,
+        height:20,
+        width:20,
+
+    },
+
+
+});

units/components/pages/AllScreenChart.js

@@ -0,0 +1,176 @@
+import React,{ Component} from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    Image,
+    DeviceEventEmitter
+} from 'react-native';
+
+import {NativeModules} from 'react-native';
+const YRRnBridge = NativeModules.YRRnBridge;
+import Orientation from 'react-native-orientation';
+import Echarts from 'native-echarts';
+import Dimensions from 'Dimensions';
+const {width,height} = Dimensions.get('window');
+
+export  default class AllScreenChart extends Component {
+
+
+    constructor(props) {
+        super(props);
+
+        const {params} = this.props.navigation.state;
+
+        params.legend.padding = [10,10,10,10];
+
+
+        console.log(params);
+        console.log(this.props.navigation.state.params);
+
+
+        this.state = {
+
+            options:params,
+            width:width,
+            height:height,
+
+        }
+
+
+
+    }
+
+
+
+    componentDidMount() {
+
+        Orientation.lockToLandscapeRight();
+
+
+        const initial = Orientation.getInitialOrientation();
+
+        if (initial === 'PORTRAIT') {
+
+            this.setState({
+
+                width:width,
+                height:height,
+
+            })
+
+        } else {
+            this.setState({
+
+                width:height,
+                height:width,
+
+            })
+        }
+
+    }
+
+
+
+    _onPressAllScreen(){
+
+        Orientation.lockToPortrait();
+
+        this.props.navigation.goBack();
+
+    }
+
+    render() {
+
+
+        return (
+            <View style={styles.container}>
+
+                <View  style={styles.topView}>
+
+                    <Text style={styles.topView_title}>
+
+                        今年水果排行榜和种类
+
+                    </Text>
+
+
+                    <TouchableOpacity
+
+                        style = {styles.topView_touch}
+
+                        onPress={()=>this._onPressAllScreen()}
+
+
+                    >
+
+                        <Image style={styles.topView_image}
+
+                               source={{uri: 'bi_allScreen'}}
+
+                        >
+
+
+                        </Image>
+
+                    </TouchableOpacity>
+
+                </View>
+
+                <Echarts option={this.state.options} height={this.state.width-50} width={this.state.height}/>
+
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container:{
+
+        backgroundColor:'white',
+        flex:1,
+
+    },
+
+    topView:{
+
+        marginTop:20,
+        marginBottom:6,
+        height: 30,
+        justifyContent:'space-between',
+        flexDirection:'row',
+
+    },
+
+    topView_title:{
+
+        fontSize:18,
+        color: '#333333',
+        height:30,
+        marginLeft: 10,
+        width:200,
+        lineHeight:30,
+
+    },
+    topView_touch:{
+
+        padding:1,
+        marginRight:20,
+        paddingRight:20,
+        height:30,
+        width:30,
+
+
+    },
+    topView_image:{
+
+        marginTop:5,
+        marginRight:18,
+        height:20,
+        width:20,
+
+    },
+
+
+});

units/components/pages/CodePushPage.js

@@ -1,6 +1,6 @@
 import React,{ Component } from 'react';
 import {
-    Dimensions,
+    Dimensions, Image,
     StyleSheet,
     Text,
     TouchableOpacity,
@@ -9,6 +9,8 @@ import {
 import CodePush from "react-native-code-push";
 
 class CodePushPa extends Component {
+
+
     constructor(props) {
         super(props);
 
@@ -20,6 +22,7 @@ class CodePushPa extends Component {
 
     }
 
+
     codePushStatusDidChange(syncStatus) {
         switch(syncStatus) {
             case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
@@ -64,12 +67,12 @@ class CodePushPa extends Component {
     }
 
     getUpdateMetadata() {
-        CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
-            .then((metadata) => {
-                this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
-            }, (error) => {
-                this.setState({ syncMessage: "Error: " + error, progress: false });
-            });
+        // CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
+        //     .then((metadata) => {
+        //         this.setState({ syncMessage: metadata ? JSON.stringify(metadata) : "Running binary version", progress: false });
+        //     }, (error) => {
+        //         this.setState({ syncMessage: "Error: " + error, progress: false });
+        //     });
     }
 
     /** Update is downloaded silently, and applied on restart (recommended) */

units/components/pages/DetailsScreen.js

@@ -30,6 +30,7 @@ export class DetailsScreen extends React.Component {
                 <View   style={{margin: 3}}>
                 <Button
                     title="返回"
+
                     onPress={() => this.props.navigation.goBack()}
                 />
                 </View>

units/components/pages/EChartsPage.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import {
+    StyleSheet,
+    View,
+    FlatList, Image,
+} from 'react-native';
+import BIChartsItem from "../commons/bi/BIChartsItem";
+
+export default class EChartsPage extends Component {
+
+
+    static navigationOptions = {
+
+        headerBackImage:(
+
+            <View style={{marginLeft:18}}>
+
+                <Image
+                    source={{uri: 'uu_back-icon'}}
+                    style={{ width: 12, height: 20,marginRight:6}}
+                />
+
+            </View>
+
+
+        ), //使用组件
+
+
+    }
+
+
+    constructor(props){
+
+        super(props);
+
+        this.state={
+
+            dataArray:['line','bar','line'],
+
+        }
+
+
+    }
+
+    renderItem(data){
+
+          return <BIChartsItem
+
+           typeTitle = {data.item}
+
+          />
+
+    }
+
+
+    render() {
+
+        return (
+
+            <View style={styles.container}>
+
+                <FlatList
+
+                    data={this.state.dataArray}
+                    renderItem = {data=>this.renderItem(data)}
+
+                />
+
+            </View>
+        );
+    }
+}
+
+
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex:1,
+        backgroundColor: '#efefef',
+    },
+
+    title:{
+        color:'white',
+        fontSize:20,
+        textAlign:'center',
+    },
+
+});

units/components/pages/HomeScreen.js

@@ -1,14 +1,44 @@
 import React from "react";
 import {connect} from 'react-redux'
-import {View, Text, Button,TouchableHighlight,StyleSheet} from "react-native";
+import {View, Text, Button,TouchableHighlight,StyleSheet,Image,TouchableOpacity} from "react-native";
 import {changeBtnText} from "../../actions/bi/index";
 import YRHttpRequest from  "../../utils/network/fetch"
 import {API} from "../../utils/network/axios/api.config";
 import {NativeModules} from 'react-native';
+import NavigationUtil from "../navigator/NavigationUtil";
 const YRRnBridge = NativeModules.YRRnBridge;
 
 class HomeScreen extends React.Component {
 
+    static navigationOptions = {
+        title: 'DetailsScreen',
+        headerBackTitle:'返回',//设置返回此页面的返回按钮文案，有长度限制
+        headerLeft:(
+
+            <TouchableOpacity  style={{marginLeft:0,width:50,height:30}}
+
+
+                onPress={() => {
+
+                    YRRnBridge.goBack();
+
+                }}
+
+            >
+
+
+                <Image  style={{marginLeft:20,marginTop:6,width:12,height:20,}}
+
+                        source={{uri: 'uu_back-icon'}}
+
+                ></Image>
+
+            </TouchableOpacity>
+
+
+        )
+    }
+
     loadData=()=>{
         //fetch请求
         console.log("loadData():",API.TEST_GET);
@@ -51,8 +81,6 @@ class HomeScreen extends React.Component {
         )
 
 
-
-
     }
 
     componentWillUnmount() {   // 移除监听
@@ -64,7 +92,11 @@ class HomeScreen extends React.Component {
 
 
     render() {
+
         const {navigation} = this.props;
+
+        NavigationUtil.navigation = navigation;
+
         return (
             <View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
                 <Text style={{marginBottom: 10}}>Home Screen</Text>
@@ -95,17 +127,18 @@ class HomeScreen extends React.Component {
                     <Text style={styles.text} > Touch Here </Text>
                 </TouchableHighlight>
 
-                <Button title="iOS返回测试"
+                <Button title="热更新测试"
                         onPress={() => {
 
-                                 YRRnBridge.goBack();
+                            NavigationUtil.goPage({name: '热更新'},'CodePushPage');
 
-                        }}/>
+                            // navigation.navigate('CodePushPage', {name: '热更新'});
 
-                <Button title="热更新测试"
+                        }}/>
+                <Button title="图表测试"
                         onPress={() => {
 
-                            navigation.navigate('CodePushPage', {name: '热更新'});
+                            navigation.navigate('EChartsPage', {name: '图表'});
 
                         }}/>
 

units/containers/AppContainer.js

@@ -2,20 +2,23 @@ import { createStackNavigator, createAppContainer } from "react-navigation";
 import HomeScreen from "../components/pages/HomeScreen";
 import {DetailsScreen} from "../components/pages/DetailsScreen";
 import CodePushPage from "../components/pages/CodePushPage";
+import EChartsPage from "../components/pages/EChartsPage";
+import AllScreenChart from "../components/pages/AllScreenChart";
 
 export const AppNavigator = createStackNavigator({
     Home: {
         screen: HomeScreen,
         navigationOptions: {//在这里定义每个页面的导航属性，静态配置
             title: "首页",
-            headerBackTitle:'返回主界面',//设置返回此页面的返回按钮文案，有长度限制
+            headerBackTitle:'返回',//设置返回此页面的返回按钮文案，有长度限制
+
         }
     },
     Details:{
         screen:DetailsScreen,
         navigationOptions : {
             title: '详情',
-            headerBackTitle:'返回',//设置返回此页面的返回按钮文案，有长度限制
+            headerBackTitle:'详情',//设置返回此页面的返回按钮文案，有长度限制
         }
     },
     CodePushPage:{
@@ -24,7 +27,24 @@ export const AppNavigator = createStackNavigator({
             title: '热更新',
             headerBackTitle:'热更新',
         }
-    }
+    },
+
+    EChartsPage:{
+        screen:EChartsPage,//热更新测试页面
+        navigationOptions : {
+            title: '图表',
+            headerBackTitle:'图表',
+        }
+    },
+    AllScreenChart:{
+
+        screen: AllScreenChart,//热更新测试页面
+        navigationOptions : {
+            gesturesEnabled: false,
+            header:null,
+        }
+
+}
 }, {
     initialRouteName: 'Home',
 });