Articles of reactjs

如何整合twilio在Android本机反应?

我正在与原生反应,build立需要twilio集成的android移动应用程序。 我已经使用npm回购示例代码。 。 https://github.com/rogchap/react-native-twilio const Twilio = require('react-native-twilio'); Twilio.initWithToken('sometoken'); componentWillMount() { Twilio.initWithTokenUrl('https://example.com/token'); // or Twilio.initWithToken('sometoken'); Twilio.addEventListener('deviceDidStartListening', this._deviceDidStartListening); Twilio.addEventListener('deviceDidStopListening', this._deviceDidStopListening); Twilio.addEventListener('deviceDidReceiveIncoming', this._deviceDidReceiveIncoming); Twilio.addEventListener('connectionDidStartConnecting', this._connectionDidStartConnecting); Twilio.addEventListener('connectionDidConnect', this._connectionDidConnect); Twilio.addEventListener('connectionDidDisconnect', this._connectionDidDisconnect); Twilio.addEventListener('connectionDidFail', this._connectionDidFail); } Twilio.connect({To: '+61234567890'}); Twilio.disconnect(); Twilio.accept(); Twilio.reject(); Twilio.ignore(); 但我无法完成。 如果有人对此有所了解,请帮助我。

无法获得BatchBridge,请确保您的包已正确打包

我正在尝试运行我创build的反应原生应用程序。 当我在手机中运行它时,我正在获取下面的屏幕。 我试着运行“react-native start”,当我运行它,我得到下面的输出。 当它停在“初始化包pipe理器”时,我在另一个terminal上运行“react-native run-android”。 仍然我得到相同的BatchBridge错误。 当我点击错误屏幕上的刷新button时,我会看到下面的屏幕。 我在这里做错了什么? 在我的代码中,我只有一个console.log。 只是一个新的项目开始。 任何意见将不胜感激。 我试着在应用程序启动时指向错误“无法获得BatchedBridge,请确保您的包已打包正确”的错误答案,但是它的一组Linux命令。

npm WARN jest-react-native@17.0.0要求同行whatwg-fetch@^1.0.0,但没有安装

当我尝试在ReactNative项目中运行npm install时,出现这个错误。为了解决这个问题,我尝试安装whatwg-fetch@^1.0.0,但同样的错误。 UNMET PEER DEPENDENCY whatwg-fetch@2.0.1 npm WARN jest-react-native@17.0.0 requires a peer of whatwg-fetch@^1.0.0 but none was installed. npm ERR! code 1

无法连接远程debugging器

我正在使用React.JS,当我做react-native run-android (与我的设备插入),我看到一个空白页。 当我晃动设备,并从选项列表中selectDebug JS Remotely ,我看到以下屏幕。 供参考: OS: Ubuntu 16.04 Node version is: v4.6.2 java version "1.8.0_111" react": "15.4.1 react-native": "0.38.0

不能将没有CSS节点的子节点添加到没有度量函数的节点

我升级到了React Native v0.40,一个完美运行的应用程序开始抛出这个错误。 任何线索? 这是我经过大量研究发现的唯一的文件https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java 。

如何在真实设备上打开react-native的开发菜单

我已经看到了一些边界情况和奇怪的开发人员界面。 从“摇动你的设备” ,这是非常不切实际的,特别是与平板电脑 要解决Android工作室模拟button按下。 有一个一致的方法来做到这一点? 我们不能使用实习API在我们的应用程序中有一个debuggingbutton来启动navigator.popUpDevMenu()这样的菜单吗? 如果不是的话,你如何动摇你的平板电脑,使其工作。 这也是为了解决如何在真实设备上configurationHMR 。 React native确实可以改善开发体验,但是我会说特别的事情会让它变慢一点。

关注React Native AirBnb的MapView上的用户位置

我在我的app上使用airbnb的地图作为react-native。 这个问题是为Android应用程序,因为我还没有解决iOS应用程序。 我的问题: navigator.geolocation在模拟器上工作正常,但在真实设备上花费太长时间,以至于有时在较旧的设备上超时。 我注意到了什么: 如果showsUserLocation prop设置为true,则可以在getCurrentPositionparsing之前在地图上看到本机“当前位置”标记。 我想要的是: 我希望我的区域始终以用户的位置为中心。 我想要一种方法来访问本地的地理位置api(应该更快?),或者也许有人告诉我我做错了什么。 以下是一个代码示例。 即使在打开/closures位置服务之后,我仍然能够检测到用户的位置。 这是showsUserLocation道具的行为,但似乎一旦watchPostion错误,它完全停止。 这是我迄今为止,这是非常简单的,因为它是: componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { console.log("getCurrentPosition Success"); this.setState({ region: { …this.state.region, latitude: position.coords.latitude, longitude: position.coords.longitude, } }); this.props.resetNotifications(); this.watchPosition(); }, (error) => { this.props.displayError("Error dectecting your location"); alert(JSON.stringify(error)) }, {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); } watchPosition() { this.watchID […]

反应本机ListView TextInput从性能优化呈现locking

我正在尝试为列表视图的每一行中包含的每个textinput设置一个状态值。 问题是,React Native的ListView组件有一些优化技术,例如删除超出屏幕界限的行。 这是一个问题,因为TextInputs正在locking它们的value属性,编辑它们将不再反映更改,并且状态值locking或什么。 我附上了一个video来展示这种行为。 _renderRow(value){ let tempWidth = window.width / 2.13 if(value.data.length == 1){ tempWidth = window.width*0.970 } var Images = value.data.map((b,i) => { let source = { uri: BUCKETIMAGES+'/'+b.image_filename} return ( <TouchableOpacity key={i} style={styles.cardImage}> {b.profile_picture && <View style={{zIndex: 4, width:31,height:31,borderWidth:1,borderColor:"#ccc",borderRadius:20, position: "absolute", right: -6, top: -6}}> <CacheableImage style={{width:30,height:30,borderWidth:3,borderColor:"white",borderRadius:15,position: "absolute", right: 0, top: 0}} […]

反应原生弹性框不使用所有可用空间

我有一个布局,我想要全屏。 这就是现在的样子: 我想要的是布局占据屏幕上的所有空间(所以提交button应该在底部)。 我试图使用{flex: 1}但它不工作。 代码如下: 'use strict'; const React = require('react-native'); const { StyleSheet, Text, View, BackAndroid, TextInput, TouchableNativeFeedback, ScrollView } = React; const ActionButton = require('./action-button'); module.exports = React.createClass({ handleBackButtonPress () { if (this.props.navigator) { this.props.navigator.pop(); return true; } return false; }, componentWillMount () { BackAndroid.addEventListener('hardwareBackPress', this.handleBackButtonPress); }, componentWillUnmount () { BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButtonPress); […]

如何在React Native中创build对angular边框?

我正在根据devise师的devise构build一个React Native应用程序。 该devise有几个地方有一个对angular线的button或形状(见下面的例子)。 我试过使用SkewX但似乎旋转整个形状(似乎无法在Android上工作)。 我怎样才能绘制一边有一个对angular边框的矩形/button?