hikr app 只是另一个 android.view.View
先决条件
- 你应该安装保险丝( https://www.fusetools.com/downloads)
- 你应该完成介绍教程
- 在终端:
fuse install android
- 在终端:
uno install Fuse.Views
步骤 1
git clone https://github.com/fusetools/hikr
第 2 步 :添加对 Fuse.Views
的包引用
在项目根文件夹中找到 hikr.unoproj
文件,并将 Fuse.Views
添加到 Packages
数组中。
{
"RootNamespace":"",
"Packages": [
"Fuse",
"FuseJS",
"Fuse.Views"
],
"Includes": [
"*",
"Modules/*.js:Bundle"
]
}
第 3 步 :使 HikrApp
组件保持整个应用程序
3.1 在项目根文件夹中创建一个名为 HikrApp.ux
的新文件并粘贴 MainView.ux
的内容。
HikrApp.ux
<App Background="#022328">
<iOS.StatusBarConfig Style="Light" />
<Android.StatusBarConfig Color="#022328" />
<Router ux:Name="router" />
<ClientPanel>
<Navigator DefaultPath="splash">
<SplashPage ux:Template="splash" router="router" />
<HomePage ux:Template="home" router="router" />
<EditHikePage ux:Template="editHike" router="router" />
</Navigator>
</ClientPanel>
</App>
3.2 在 HikrApp.ux
- 用
<Page>
替换<App>
标签 - 将
ux:Class="HikrApp"
添加到开放时间 14 - 删除
<ClientPanel>
,我们不必再担心状态栏或底部导航按钮
HikrApp.ux
<Page ux:Class="HikrApp" Background="#022328">
<iOS.StatusBarConfig Style="Light" />
<Android.StatusBarConfig Color="#022328" />
<Router ux:Name="router" />
<Navigator DefaultPath="splash">
<SplashPage ux:Template="splash" router="router" />
<HomePage ux:Template="home" router="router" />
<EditHikePage ux:Template="editHike" router="router" />
</Navigator>
</Page>
3.3 在 MainView.ux
中使用新创建的 HikrApp
组件
将 MainView.ux
文件的内容替换为:
<App>
<HikrApp/>
</App>
我们的应用程序恢复了正常行为,但我们现在已将其提取到名为 HikrApp
的单独组件中
步骤 4 在 MainView.ux
内用 <ExportedViews>
替换 <App>
标签,并将 ux:Template="HikrAppView"
添加到 <HikrApp />
<ExportedViews>
<HikrApp ux:Template="HikrAppView" />
</ExportedViews>
记住模板 HikrAppView
,因为我们需要它来从 Java 获取对我们视图的引用。
注意。从保险丝文档:
当做正常的
fuse preview
和uno build
时,ExportedViews
将表现为App
不对。从 Fuse Studio 预览时会出现此错误:
错误:无法在任何包含的 UX 文件中找到 App 标记。你是否忘记包含包含 app 标签的 UX 文件?
步骤 5 将 SplashPage.ux
的 <DockPanel>
包裹在 <GraphicsView>
中
<Page ux:Class="SplashPage">
<Router ux:Dependency="router" />
<JavaScript File="SplashPage.js" />
<GraphicsView>
<DockPanel ClipToBounds="true">
<Video Layer="Background" File="../Assets/nature.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" Opacity="0.5">
<Blur Radius="4.75" />
</Video>
<hikr.Text Dock="Bottom" Margin="10" Opacity=".5" TextAlignment="Center" FontSize="12">original video by Graham Uhelski</hikr.Text>
<Grid RowCount="2">
<StackPanel Alignment="VerticalCenter">
<hikr.Text Alignment="HorizontalCenter" FontSize="70">hikr</hikr.Text>
<hikr.Text Alignment="HorizontalCenter" Opacity=".5">get out there</hikr.Text>
</StackPanel>
<hikr.Button Text="Get Started" FontSize="18" Margin="50,0" Alignment="VerticalCenter" Clicked="{goToHomePage}" />
</Grid>
</DockPanel>
</GraphicsView>
</Page>
步骤 6 将保险丝项目导出为 aar 库
- 在终端中,在根项目文件夹中:
uno clean
- 在终端中,在根项目文件夹中:
uno build -t=android -DLIBRARY
步骤 7 准备你的 android 项目
- 将 ti 从
.../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar
复制到.../androidRootProject/app/libs
- 将
flatDir { dirs 'libs' }
添加到 rootbuild.gradle
文件中
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript { ... }
...
allprojects {
repositories {
jcenter()
flatDir {
dirs 'libs'
}
}
}
...
- 将
compile(name: 'app-debug', ext: 'aar')
添加到app/build.gradle
中的依赖项
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.2"
defaultConfig {
applicationId "com.shiftstudio.fuseviewtest"
minSdkVersion 16
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile(name: 'app-debug', ext: 'aar')
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.3.1'
testCompile 'junit:junit:4.12'
}
- 将以下属性添加到
AndroidManifest.xml
内的活动
android:launchMode="singleTask"
android:taskAffinity=""
android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize"
你的 AndroidManifest.xml
将如下所示:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.shiftstudio.fuseviewtest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:launchMode="singleTask"
android:taskAffinity=""
android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
第 8 步 :在你的 Activity
中显示 Fuse.View HikrAppView
- 请注意,你的
Activity
需要继承FuseViewsActivity
public class MainActivity extends FuseViewsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ViewHandle fuseHandle = ExportedViews.instantiate("HikrAppView");
final FrameLayout root = (FrameLayout) findViewById(R.id.fuse_root);
final View fuseApp = fuseHandle.getView();
root.addView(fuseApp);
}
}
activity_main.xml 中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.shiftstudio.fuseviewtest.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"
android:layout_height="wrap_content"
android:text="Hello World, from Kotlin" />
<FrameLayout
android:id="@+id/fuse_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:text="THIS IS FROM NATIVE.\nBEHIND FUSE VIEW"
android:layout_gravity="center"
android:textStyle="bold"
android:textSize="30sp"
android:background="@color/colorAccent"
android:textAlignment="center"
android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
注意
按下后退按钮,在 Android 上,应用程序崩溃。你可以在保险丝论坛上关注这个问题。
A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0xdeadcab1 in tid 18026 (io.fuseviewtest)
[ 05-25 11:52:33.658 16567:16567 W/ ]
debuggerd: handling request: pid=18026 uid=10236 gid=10236 tid=18026
最后的结果是这样的。你也可以在 github 上找到一个短片。