小编zvo*_*ona的帖子

如果没有远程JS调试,React Native atob()/ btoa()无法正常工作

我有一个反应原生的测试应用程序,当我远程启用调试js时,一切正常.在运行后,它在设备(来自XCode)和模拟器中工作正常:

react-native run ios
Run Code Online (Sandbox Code Playgroud)

问题是,如果我停止远程js调试,登录测试将不再起作用.登录逻辑非常简单,我正在获取api来测试登录,API端点是通过https.

我需要改变什么?

更新:此代码与JS Debug Remote Enabled一起工作,如果我禁用它,它将不再起作用.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,      
  View,
  Button,
  Alert
} from 'react-native'

export default class MyClass extends Component {

  constructor (props) {
    super(props)
    this.testFetch = this.testFetch.bind(this)
  }

  async testFetch () {
    const email = 'email@example.com'
    const password = '123456'

    try {
      const response = await fetch('https://www.example.com/api/auth/login', {
        /* eslint no-undef: 0 */
        method: 'POST', …
Run Code Online (Sandbox Code Playgroud)

react-native

41
推荐指数
3
解决办法
2万
查看次数

React Native上的TabBarIOS无法按预期工作

我在实现React Native的Tab Bar时遇到了问题.该文档不存在(http://facebook.github.io/react-native/docs/tabbarios.html),其首页的示例不足(例如,缺少必需的属性图标).

我设法从代码的角度实现它,并出现了一些东西.但只有一个浅蓝色的盒子占据了屏幕上一半的空间.

我的"工作"代码看起来像这样:

<TabBarIOS>
  <TabBarIOS.Item title="Wooden" selected={false} icon={require('image!wooden')}>
    <NavigatorIOS initialRoute={{ title: 'Wooden' }} />
  </TabBarIOS.Item>
</TabBarIOS>
Run Code Online (Sandbox Code Playgroud)

但就像说的那样,最终的结果并没有预料到.

有没有人设法成功实施TabBarIOS?我试图搜索源代码,但没有任何问题可以帮助我.

react-native

8
推荐指数
1
解决办法
7496
查看次数

React中的从右到左(RTL)支持

在React应用程序中实现RTL支持的最佳方法是什么?有没有办法覆盖默认<p><span>标签(组件)来添加RTL支持,这样我就不必重写我已写过的组件来支持RTL?(例如,要有一些全局变量window.RTL,所以当设置为true时,将所有<p><span>标签翻转文本方向转换为RTL).我可以改变构建系统,或制作一个babel插件,React.createElement("p" ...)用我自己的ap tag实现替换所有,但有更好的解决方案吗?

谢谢.

javascript right-to-left reactjs

8
推荐指数
2
解决办法
5127
查看次数

当我使用AsyncStorage.getItem()来检索指定键的值时,它返回一个Promise对象作为String而不是Object

存储的反对意见是:

{
 name: 'Chris',
 age: 30,
 traits: {
    hair: 'brown',
    eyes: 'brown'
  },
};
Run Code Online (Sandbox Code Playgroud)

无法检索value.propertyName.

AsyncStorage.getItem('key').then( (value) => console.log('value ', value, 'name is ', value.name));
Run Code Online (Sandbox Code Playgroud)

输出为:value {"name":"Chris","age":30,"traits":{"hair":"brown","eyes":"brown"}}名称未定义.

请告诉我如何从promise对象中检索特定值

promise react-native

8
推荐指数
1
解决办法
3426
查看次数

登录表单不提供Chrome上的密码保存

我正在使用React创建一个登录表单.它正在使用window.fetch(polyfill)处理请求并react-router在登录后进入正确的页面.

问题是Chrome不提供保存用户名+密码的可能性,而Firefox,Safari和IE确实如此(可能也是Opera).

我目前正在使用仅针对http的localhost进行测试,但我不认为这是问题所在.

这是代码:

doSignIn: function(evt) {
  evt.preventDefault();

  this.context.SignInAction.signIn(evt.target.action, {
    email: this.credentials.email,
    password: this.credentials.password
  })
  .then(() => {
    this.transitionTo('/');
  })
  .catch((err) => {
    this.setState({incorrectSignIn: true});
    React.findDOMNode(that.refs.email).focus();
  });
},
Run Code Online (Sandbox Code Playgroud)

(渲染部分):

<form autoComplete='on' method='POST' action='/site/sign-in' onSubmit={this.doSignIn}>
  <ul className='signIn'>
    <li className={classesNotification}>Invalid e-mail or password</li>
    <li>
      <input
        ref='email'
        type='email'
        defaultValue={this.credentials.email}
        placeholder='your e-mail address'
        required
        autoFocus='true' />
    </li>
    <li>
      <input
        type='password'
        defaultValue={this.credentials.password}
        placeholder='password'
        required /></li>
    <li><button type='submit'>Sign in</button></li>
  </ul>
</form>
Run Code Online (Sandbox Code Playgroud)

我寻找类似的案例,但大多数人声称它是由它引起的autocomplete=off.在我的情况下情况并非如此.

我还检查了一个问题:使用reactjs和javascript - Chrome不提供记住密码,但它没有帮助.

这是Chrome中的错误还是我必须以某种方式"传播"我的请求作为普通表单帖子才能让Chrome了解我们实际上是在向服务器发送用户名+密码?

请注意,我已尝试使用三台不同的计算机,一台本地计算机,一台来自同一网络,一台来自虚拟机,还检查了我自己的Chrome自动完成首选项.从这个角度来看,一切都很好.

javascript forms google-chrome reactjs

7
推荐指数
1
解决办法
1186
查看次数

window.safari.pushNotification.requestPermission 总是返回“拒绝”

编辑:我找到了实现 Safari 推送通知的解决方案,并在博客上介绍了该过程:http : //samuli.hakoniemi.net/how-to-implement-safari-push-notifications-on-your-website/

...单击“订阅”时,它应该为 OSX 10.9.x 上的 Safari 7.x 启用推送通知。

推送通知在http://www.macrumors.com/ 上工作,他们已经在那里实现了它。但是,在我自己的测试网站上,我总是被“拒绝”作为许可结果,而 Safari 甚至根本没有提示。

所以:我没有得到任何允许推送通知权限的提示,只是一个带有permissionData.denied.

我发现这个问题来自 SO 有类似的问题: Safari push notification return denied without ask

但不幸的是,它没有给我任何建议。

javascript safari apple-push-notifications

5
推荐指数
1
解决办法
4462
查看次数

在其外部轻敲时模糊TextInput

我遇到使用TextInput预期行为的问题是,当我点击它时,它会聚焦并显示键盘,当我点击它(除了输入之外的任何地方)时,TextInput应该模糊,键盘将消失.目前这不会发生,无论我点击哪里,文本输入都会保持聚焦.这是预期的行为,如果是这样,通常如何处理?

<Image source={require('../assets/background.jpg')} style={{width: undefined; height: undefined; flex: 1;}}>
  <View>
    <TextInput placeholder="Email" style={{ width: 200; height: 40; }} />
  </View>
</Image>
Run Code Online (Sandbox Code Playgroud)

javascript react-native

4
推荐指数
1
解决办法
4049
查看次数

错误:未定义不是函数-React Native

我创建了一个简单的活动,在该活动中,如果您在圆形区域内按,则其中的文本应相应更改。该应用程序运行良好,但是当我在圆形区域内按时,出现错误消息“未定义不是函数(评估'this.setState({pressing:true});')”)。同样,圆形区域内的文本应首先设置,但为空。您可以在此处查看活动。下面还提供了代码:

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  AppRegistry,
  Text,
  TouchableHighlight
} from "react-native";

class dhrumil extends Component {
  constructor(props) {
    super(props);
    this.state = { pressing: false };
  }
  _inPress() {
    this.setState({ pressing: true });
  }
  _outPress() {
    this.setState({ pressing: false });
  }
  render() {
    return (
      <View style={styles.mainContainer}>
        <TouchableHighlight
          onPressIn={this._inPress}
          onPressOut={this._outPress}
          style={styles.toucher}
        >
          <View style={styles.smallContainer}>
            <Text style={styles.texter}>
              {this.state.pressing ? "EEK" : "PUSH ME"}
            </Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}
var styles = …
Run Code Online (Sandbox Code Playgroud)

android react-native

4
推荐指数
1
解决办法
1万
查看次数

如何移动下一个textInput进行反应原生

我使用React Native 0.48.4.如何选择下一个TextInput?我尝试使用以下代码,它不适合我

<TextInput 
  returnKeyType={'next'}
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  autoFocus={true}
  blurOnSubmit={true}
  onSubmitEditing={(event) => { 
    this.refs.SecondInput.setFocus(); 
  }}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>
<TextInput 
  ref='SecondInput'
  returnKeyType='next'
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  blurOnSubmit={false}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>
Run Code Online (Sandbox Code Playgroud)

react-native

3
推荐指数
1
解决办法
2557
查看次数

在iPad网络应用程序上的全屏图像呈现

我正在iPad网络应用程序上显示包含多个全尺寸(768x1024)图像的视图.图像位于彼此相邻的独立div中.这些图像是预装的.

图像之间的转换是使用-webkit-transform:translate3d()完成的,这在考虑性能时应该是最有效的方式.过渡是为整个身体元素完成的.但我不能说是通过复制滚动,平铺滚动还是完全重绘来执行渲染.

但是,当我在图像之间滑动时,渲染新图像并不完全正常 - 图像的右侧(最后~20%)闪烁.只有在第一次显示图像时才会发生这种情况,之后没有问题.

我已经尝试过的:

  • 两个全尺寸图像(每个约200kb)和lo-res(每个~30kb)作为背景图像
  • 像上面一样,但作为img元素
  • 较小的缩略图图像拉伸为全尺寸背景大小:封面(性能非常糟糕)
  • 单色图像.
  • 通过在单个视图中缩小整数内容然后将其重新缩放为100%来一次显示整个内容

这些都不起作用.我也试过通过离线应用程序缓存提供图像,但是我没有这个问题在加载图像的地方有很多工作,但纯粹是作为渲染问题.

我还检查了我是否具有可能影响性能的CSS属性(例如,过滤器,定位或溢出问题).不应该有任何会导致惩罚的事情.

目前,只有工作解决方案才能完全没有图像,因为没有图像就没有渲染问题.并且完成转换后的显示图像.然而,这只是第二个(也是最后一个)解决方案.

performance transition web-applications fullscreen ipad

1
推荐指数
1
解决办法
1483
查看次数