我正在创建一个裸露的React 360应用程序,以熟悉各种来源的输入处理。这是文档Input Handling React 360的网页。阅读该页面后,我无法完全获得输入,并且不清楚原因。这是我的代码:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-360';
export default class ExampleVR extends React.Component {
render() {
return (
<View style={styles.panel}>
<View style={styles.greetingBox}>
***********Why is this not doing anything?**************
<View onInput={e => {
const inputEvent = e.nativeEvent.inputEvent;
console.log(inputEvent);
}}>
{ /* ... */ }
</View>
****************************
<Text style={styles.greeting}>
Welcome to React 360
</Text>
</View>
</View>
);
}
};
上面的代码什么都不做,说实话我不确定如果它能工作会做什么。从文档中,我认为它将console.log
作为输入对象供我查看。这是我从以前看到的react vr问题中收集的。我不明白的是这是如何触发的?我单击它,按笔记本电脑上的键盘,什么也没有。没有太多的信息要继续。有人遇到过类似的事情吗?
答案 0 :(得分:0)
我想我想出了自己的问题以供将来参考。在上面的代码中,当我使用<View onInput={....}>
运行应用程序时,npm start
是“不可见的”。我所做的是删除示例中包含的周围视图,然后向其中添加了一些样式表css样式。这是代码:
export default class ExampleVR extends React.Component {
render() {
return (
<View style={styles.input} onInput={e => {
const inputEvent = e.nativeEvent.inputEvent;
console.log(inputEvent);
}}>
{ /* ... */ }
</View>
);
}
};
const styles = StyleSheet.create({
input: {
width: 1000,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.4)',
justifyContent: 'center',
alignItems: 'center',
},
}
这就像我期望的那样。当我单击当前键盘或按键时,将按预期方式打印输入对象。