小编Dav*_*han的帖子

在开始使用React.js之后,看起来似乎props是静态的(从父组件传入),而state基于事件的更改.但是,我在文档中注意到了一个引用componentWillReceiveProps,具体包括这个例子:

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

这似乎意味着属性可以根据对比nextProps来改变组件this.props.我错过了什么？道具是如何改变的,还是我误解了它被称为何处？

如何在水平和垂直中将ReactNative中的文本居中？

我在rnplay.org中有一个示例应用程序,其中justifyContent ="center"和alignItems ="center"不起作用:https: //rnplay.org/apps/AoxNKQ

文本应该居中.为什么文本(黄色)和父容器之间的顶部有一个边距？

码:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>

                </View>
                <View style={styles.otherContainer}>
                </View>
            </View>
    );
  }
});

var styles = StyleSheet.create({

    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center',
    },

    topBox: {
        flex: 1,
        flexDirection: 'row',
        backgroundColor: 'lightgray', …

似乎position:absolute在使用中元素不能使用justifyContent或居中alignItems.有一种解决方法可以使用,marginLeft但即使使用尺寸来检测设备的高度和宽度,也不会为所有设备显示相同的解决方法.

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

如何在视图上渲染阴影？我尝试过shadowColor,shadowOffset,shadowOpacity和shadowRadius的许多组合,它们似乎什么都不做.我确信样式正确应用,因为我设置的其他属性工作.

出于好奇,我只想知道如果我setState()在React Native或ReactJS中使用类的构造函数中会发生什么？如:

constructor(props) {
  super(props);
  this.setState({title: 'new title'});
}

React的生命周期会发生什么？

我没有读过React中的代码.我恐怕当我这样写时会有任何损害.

我开始在sublime文本中编写一些基本的React代码.这是我的语法高亮显示.其部分突出显示.是否有任何建议的sublime插件我可以用来查看完整的语法高亮？

import React, { Component } from 'react'
import { connect } from 'react-redux'   // <-- is the glue between react and redux
import { bindActionCreators } from 'redux'
import { selectBook } from '../actions/index'

// there is no intrinsic connection between React and Redux
// they are two seperate libraries
// they are connected using a seperate library called ReactRedux

// container? its a React component that hasa direct connection to state managed by Redux
class BookList extends Component …

我收到以下错误: Possible unhandled promise rejection (id:0: Network request failed

这是承诺代码,我不知道这里有什么问题,任何想法？

  return fetch(url)
    .then(function(response){
      return response.json();
    })
    .then(function(json){
      return {
        city: json.name,
        temperature: kelvinToF(json.main.temp),
        description: _.capitalize(json.weather[0].description)
      }
    })
    .catch(function(error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
    });
}

**编辑:我添加了一个catch函数并得到了更好的错误 You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined

这是index.ios.js代码.网址很好,并给我正确的json数据.我可以用控制台日志中都可以看到region.latitude,并region.longitude处于可用Api(region.latitude, region.longitude).但是data未定义.我仍然不确定发生了什么,为什么会出现问题data以及为什么它未定义.

// var React = require('react-native'); --deprecated

// updated
import React from …

在使用describe()时,在jest或jasmine中编写单元测试时？你什么时候用它()？

我经常这样做

describe('App Name', function () {
    it('test ....', function () {
    })'
})

什么时候进行新的describe()？还是一个新的()？

在我的React Native应用程序中,我从具有未知维度的API中获取图像.如果我知道所需宽度,如何自动缩放高度？

例:

我将宽度设置为Dimensions.get('window').width.如何设置高度并保持相同的比例？

export default class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgUrl: 'http://someimg.com/coolstuff.jpg'
    }
  }

  componentDidMount() {
    // sets the image url to state
    this.props.getImageFromAPi()
  }

  render() {
    return (
      <View>
        <Image 
          source={uri: this.state.imgUrl}
          style={styles.myImg}
        />
        <Text>Some description</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create(
  myImg: {
    width: Dimensions.get('window').width,
    height: >>>???what goes here???<<<
  }
)

我想要实现以下目标:

以下图片是我现在可以做的,但这不是我想要的.

我现在拥有的代码示例:

renderA() {
    return (
        <View style={ position: 'absolute', zIndex: 0 }>    // parent of A
            <View style={ zIndex: 2 }>  // element A
            </View>
            <View style={ zIndex: 2 }>  // element A
            </View>
        </View>
    );
}

renderB() {
    return (
        <View style={ position: 'absolute', zIndex: 1 }>    // element B
        </View>
    );
}


render() {
    return (
        <View>
            {this.renderA()}
            {this.renderB()}
        </View>
    );
}

用文字表达,我想要

• 家长A:低于一切.
• 元素B:位于上面的父A但在元素A下面.
• 元素A:高于一切.

请注意,父A和元素B都必须绝对定位,并且元素A和元素B都必须是 …