标签: react-native

当我使用react-native init(RN版本0.29.1)创建一个全新的项目并将渲染方法中的提取放到公共Facebook演示电影API时,它会抛出一个Network Request Failed.有一个非常无用的堆栈跟踪,我无法在chrome控制台中调试网络请求.这是我发送的提取:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

我是React Native的新手,我想知道如何隐藏/显示组件.
这是我的测试用例:

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

我有一个TextInput组件,我想要的是显示TouchableHighlight输入何时获得焦点,然后隐藏TouchableHighlight用户按下取消按钮的时间.

我不知道如何"访问" TouchableHighlight组件以隐藏/显示我的功能showCancel/hideCancel.
另外,我怎样才能从一开始就隐藏按钮？

我试图在XCode中运行我的React Native应用程序并且我一直收到此错误.我无法弄清楚如何解决这个问题.有什么建议？

XCode中的错误屏幕截图:

我试图在ReactJS中切换组件的状态,但我得到一个错误说明:

超出最大更新深度.当组件在componentWillUpdate或componentDidUpdate中重复调用setState时,可能会发生这种情况.React限制嵌套更新的数量以防止无限循环.

我没有在代码中看到无限循环,任何人都可以帮忙吗？

ReactJS组件代码:

import React, { Component } from 'react';
import styled from 'styled-components';

class Item extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        const currentState = this.state.details;
        this.setState({ details: !currentState }); 
    }

    render() {
        return (
            <tr className="Item"> 
                <td>{this.props.config.server}</td>      
                <td>{this.props.config.verbose}</td> 
                <td>{this.props.config.type}</td>
                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>
                {<td><span onClick={this.toggle()}>Details</span></td>}
            </tr>
    )}
}

export default Item;

如何arr[]在reducer中的redux状态数组中添加元素？我这样做 -

import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
    arr:[]
}

export default function userState(state = initialUserState, action)
{
    console.log(arr);
    switch (action.type)
    {
        case ADD_ITEM: 
            return { 
                      ...state,
                      arr: state.arr.push([action.newItem])
                   }

        default:
            return state
    }
}

我正在尝试使用fetchReact Native从Product Hunt API中获取信息.我已经获得了正确的访问令牌并将其保存到状态,但似乎无法在GTP请求的授权标头内传递它.

这是我到目前为止所拥有的:

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => …

FlatList似乎不起作用.我收到了这个警告.

VirtualizedList:缺少项目的键,确保在每个项目上指定键属性或提供自定义keyExtractor.

码:

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    (item) => <Text key={Math.random().toString()}>{item.name}</Text>
  } 
  key={Math.random().toString()} />

当我运行react-native run-ios构建成功但我得到下面的错误.我已经检查了所有地方,但似乎没有任何工作.sudo在命令前面使用也无济于事.我使用的是Xcode 7.3,react-native-cli:0.2.0,react-native:0.24.1,node v5.11.0.

=== BUILD TARGET mobileTests OF PROJECT mobile WITH CONFIGURATION Release ===

Check dependencies

** BUILD SUCCEEDED **

Installing build/Build/Products/Debug-iphonesimulator/mobile.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist
/Users/astiefel/workspace/bosspayments/mobile/node_modules/promise/lib/done.js:10
      throw err;
      ^

Error: Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/mobile.app/Info.plist
Print: Entry, …

我正在尝试用react-native构建我的第一个应用程序.

我正在关注这两个教程:

• https://facebook.github.io/react-native/docs/getting-started.html#content
• https://facebook.github.io/react-native/docs/android-setup.html

我确信我安装了第二个链接的所有要求,但是当我尝试运行我的应用程序时react-native run-android,我收到以下错误:

我在运行genymotion时执行了这个命令.

这就是我在Android SDK中安装的所有内容:

我尝试安装Android构建工具23.0.1,但是我收到此错误:

我该怎么办？

虽然有类似的问题,但我无法创建具有多个功能的文件.不确定该方法是否已经过时,因为RN正在快速发展.如何在本机中创建全局辅助函数？

我是React Native的新手.

我想要做的是创建一个充满许多可重用函数的js文件,然后将其导入组件并从那里调用它.

到目前为止我一直在做的事情可能看起来很愚蠢,但我知道你会在这里提出要求.

我尝试创建一个类名Chandu并像这样导出它

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  TextInput,
  View
} from 'react-native';


export default class Chandu extends Component {

  constructor(props){
    super(props);
    this.papoy = {
      a : 'aaa'
    },
    this.helloBandu = function(){
      console.log('Hello Bandu');
    },
  }

  helloChandu(){
    console.log('Hello Chandu');
  }
}

然后我将其导入任何所需的组件.

import Chandu from './chandu';

然后像这样称呼它

console.log(Chandu);
console.log(Chandu.helloChandu);
console.log(Chandu.helloBandu);
console.log(Chandu.papoy);

唯一有效的是第一个console.log,这意味着我正在导入正确的路径,但不会导入任何其他路径.

请问这样做的正确方法是什么？