Commit f2094651 authored by jxtxzzw's avatar jxtxzzw

用 webview 替代 html render

parent e700453a
......@@ -108,6 +108,7 @@ android {
versionCode 1
versionName "1.0"
missingDimensionStrategy 'react-native-camera', 'general'
multiDexEnabled true
}
splits {
abi {
......@@ -139,6 +140,7 @@ android {
}
dependencies {
implementation project(':react-native-webview')
implementation project(':react-native-video')
implementation project(':react-native-vector-icons')
implementation project(':react-native-orientation')
......@@ -149,6 +151,7 @@ dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
compile 'com.android.support:multidex:1.0.0'
}
// Run this once to be able to run the application with BUCK
......
......@@ -3,6 +3,7 @@ package com.eoj_app;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.reactnativecommunity.webview.RNCWebViewPackage;
import com.brentvatne.react.ReactVideoPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.github.yamill.orientation.OrientationPackage;
......@@ -32,6 +33,7 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCWebViewPackage(),
new ReactVideoPackage(),
new VectorIconsPackage(),
new OrientationPackage(),
......
rootProject.name = 'eoj_app'
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
include ':react-native-vector-icons'
......
......@@ -66,6 +66,7 @@
E4405DE5F7DC4227990FD921 /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2724227E111D4FCEA8F5B69C /* libRNVectorIcons.a */; };
CCC49925A47542849B5CBC25 /* libRNVectorIcons-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 74F6F5BA7395437BAE34BB90 /* libRNVectorIcons-tvOS.a */; };
CB924EC7A357420F9627C843 /* libRCTVideo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = F22AD27EE26F47D9912434B1 /* libRCTVideo.a */; };
E0E30C0741624B9D914E5D65 /* libRNCWebView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CA170EBD9E8841E6BA6E5000 /* libRNCWebView.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
......@@ -407,6 +408,8 @@
74F6F5BA7395437BAE34BB90 /* libRNVectorIcons-tvOS.a */ = {isa = PBXFileReference; name = "libRNVectorIcons-tvOS.a"; path = "libRNVectorIcons-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
C8EAAFF3FBB54F428311441D /* RCTVideo.xcodeproj */ = {isa = PBXFileReference; name = "RCTVideo.xcodeproj"; path = "../node_modules/react-native-video/ios/RCTVideo.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
F22AD27EE26F47D9912434B1 /* libRCTVideo.a */ = {isa = PBXFileReference; name = "libRCTVideo.a"; path = "libRCTVideo.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
3F125A61F6804B5EACEECF0A /* RNCWebView.xcodeproj */ = {isa = PBXFileReference; name = "RNCWebView.xcodeproj"; path = "../node_modules/react-native-webview/ios/RNCWebView.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
CA170EBD9E8841E6BA6E5000 /* libRNCWebView.a */ = {isa = PBXFileReference; name = "libRNCWebView.a"; path = "libRNCWebView.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
......@@ -442,6 +445,7 @@
735521FB26364109BD0E494B /* libRCTOrientation.a in Frameworks */,
E4405DE5F7DC4227990FD921 /* libRNVectorIcons.a in Frameworks */,
CB924EC7A357420F9627C843 /* libRCTVideo.a in Frameworks */,
E0E30C0741624B9D914E5D65 /* libRNCWebView.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -640,6 +644,7 @@
B85BFADFA0EE4E388485DE72 /* RCTOrientation.xcodeproj */,
542459E2A6A944419A4A8AFF /* RNVectorIcons.xcodeproj */,
C8EAAFF3FBB54F428311441D /* RCTVideo.xcodeproj */,
3F125A61F6804B5EACEECF0A /* RNCWebView.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
......@@ -1321,6 +1326,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1331,6 +1337,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Debug;
......@@ -1361,6 +1368,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1371,6 +1379,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Release;
......@@ -1400,6 +1409,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Debug;
......@@ -1428,6 +1438,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Release;
......@@ -1466,6 +1477,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1476,6 +1488,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Debug;
......@@ -1514,6 +1527,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1524,6 +1538,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Release;
......@@ -1561,6 +1576,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1571,6 +1587,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Debug;
......@@ -1608,6 +1625,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
......@@ -1618,6 +1636,7 @@
"$(SRCROOT)\..\node_modules\react-native-orientation\iOS\RCTOrientation/**",
"$(SRCROOT)\..\node_modules\react-native-vector-icons\RNVectorIconsManager",
"$(SRCROOT)\..\node_modules\react-native-video\ios/**",
"$(SRCROOT)\..\node_modules\react-native-webview\ios",
);
};
name = Release;
......
......@@ -8289,6 +8289,15 @@
"lodash": "^4.16.4"
}
},
"react-native-webview": {
"version": "5.12.1",
"resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-5.12.1.tgz",
"integrity": "sha512-pFYzyNUG+k7Jk2a0Z3S1+OL9qtp0VQxVP08d1ume/O6l1Xibi0K0hRZms7zPUHqQc2uWEfjZ0FOa17MIN7vruw==",
"requires": {
"escape-string-regexp": "1.0.5",
"invariant": "2.2.4"
}
},
"react-navigation": {
"version": "3.9.1",
"resolved": "https://registry.npm.taobao.org/react-navigation/download/react-navigation-3.9.1.tgz",
......
This diff is collapsed.
import React from 'react';
import MathJax from 'react-native-mathjax';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';
import { Problem } from '../utils/api';
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20
}
});
const axios = require('axios');
export default class ProblemScene extends React.Component {
static navigationOptions = () => {
if (this.state !== undefined) {
......@@ -25,33 +20,41 @@ export default class ProblemScene extends React.Component {
this.state = {
statement: '',
id: 0,
title: ''
title: '',
style: ''
};
}
async componentDidMount() {
const data = await Problem(2997);
this.setState({
statement: data.statement,
statement: data.statement.toString(),
id: data.id,
title: data.title,
title: data.title
});
await axios({
method: 'get',
url: `${global.url}/static/css/app.css`
}).then(response => {
if (response.status === 200) {
console.log(response.data);
// this.state.style = response.data;
this.setState({
style: response.data
});
}
['catch'](error => error);
});
}
render() {
const { statement} = this.state;
// let tagHtml = null;
// for (const tag in tags) {
// tagHtml += (
// <Button>
// <Text>{tag}</Text>
// </Button>
// );
// }
const { statement, style } = this.state;
const htmlStyle =
`<style>${style}</style>` +
`<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js` +
`?config=TeX-MML-AM_CHTML' async></script>`;
return (
<View style={styles.container}>
<MathJax html={statement} />
</View>
<WebView javaScriptEnabled source={{ html: htmlStyle + statement }} />
);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment