【React Native】文件翻譯閱讀紀錄 - 指南 - 為 Apple TV 構建
 |
| Facebook Open Source React Native |
為 Apple TV 構建
已經實現了電視設備支持，目的是使現有的React Native應用程序在Apple TV和Android TV上“正常工作”，而應用程序的JavaScript代碼中幾乎不需要進行任何更改。
Android 為例
建立變化
- 本機層：要在Android TV上運行 React Native 項目，請確保對 AndroidManifest.xml 進行以下更改
<!-- Add custom banner image to display as Android TV launcher icon -->
<application
...
android:banner="@drawable/tv_banner"
>
...
<intent-filter>
...
<!-- Needed to properly create a launch intent when running on Android TV -->
<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
</intent-filter>
...
</application>
- JavaScript層：Platform.android.js中添加了對Android TV的支持。您可以通過執行操作檢查代碼是否在Android TV上運行
var Platform = require('Platform');
var running_on_android_tv = Platform.isTV;
代碼更改
- 訪問可觸摸控件：在Android TV上運行時，Android框架將根據視圖中可聚焦元素的相對位置自動應用方嚮導航方案。 Touchable mixin添加了代碼來檢測焦點變化，並使用現有方法正確設置組件樣式，並在使用電視遙控器選擇視圖時啟動正確的操作，因此TouchableHighlight，TouchableOpacity和TouchableNativeFeedback將“正常工作”。尤其是：
touchableHandleActivePressIn將在可觸摸視圖進入焦點時執行touchableHandleActivePressOut當可觸摸視圖失焦時touchableHandlePress當通過按電視遙控器上的“選擇”按鈕實際選擇可觸摸視圖時
- 電視遙控器/鍵盤輸入：一個新的本機類ReactAndroidTVRootViewHelper，為電視遙控事件設置關鍵事件處理程序。當電視遠程事件發生時，此類將觸發JS事件。此事件將由TVEventHandler JavaScript對象的實例選取。需要實現TV遠程事件的自定義處理的應用程序代碼可以創建TVEventHandler的實例並監聽這些事件，如以下代碼所示：
var TVEventHandler = require('TVEventHandler');
class Game2048 extends React.Component {
_tvEventHandler: any;
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({board: cmp.state.board.move(2)});
} else if(evt && evt.eventType === 'up') {
cmp.setState({board: cmp.state.board.move(1)});
} else if(evt && evt.eventType === 'left') {
cmp.setState({board: cmp.state.board.move(0)});
} else if(evt && evt.eventType === 'down') {
cmp.setState({board: cmp.state.board.move(3)});
} else if(evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
- 開發選單支持: 在模擬器上，cmd-M將調出開發人員菜單，就像在Android上一樣。要在真正的Android TV設備上播放，請長按遙控器上的播放/暫停按鈕。 （請不要搖動Android TV設備，這將無法正常工作:)）
- 已知的問題：
InputText組件暫時不起作用（即它們無法獲得焦點）。
0 意見