天道酬勤,学无止境

Accessing state value from StyleSheet.create in ReactNative

I'm new in ReactNative and I have the following components:

  <View style={{flex: 1}}>
    <View style={styles.container}>
      <Animated.Image style= {styles.photo}
              source={{uri: this.props.user.picture.large}}/>
    </View>
    <View style={{backgroundColor:'whitesmoke', flex: 1}}></View>
  </View>

In the styles, I have the following:

const styles = StyleSheet.create({
  container: {
  flex: 0.5,
  backgroundColor: '#4dbce9',
  alignItems: 'center',
 },
 photo: {
  height: 150,
  width: 150,
  borderRadius: 75,
  borderWidth: 3,
  borderColor: 'white',
  transform: [                        // `transform` is an ordered array
            {scale: this.state.profileImgBounceVal}, 
          ]
  }
});

I got an error when I access this.state.profileImgBounceVal as its outside the component I know. Is there any workaround for this except including the styles inside the Animated.Image tag?

评论

You could use Stylesheet.flatten() to create a reusable style object in your component:

var animatedImageStyle = StyleSheet.flatten([
  styles.photo,
  {
    transform: [{scale:this.state.profileImgBounceVal}]
  }
])

<View style={{flex: 1}}>
  <View style={styles.container}>
    <Animated.Image style={animatedImageStyle}
            source={{uri: this.props.user.picture.large}}/>
  </View>
  <View style={{backgroundColor:'whitesmoke', flex: 1}}></View>
</View>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用 react-native-maps 在 ReactNative 中获取当前位置、纬度和经度(Get current location, latitude and longitude in ReactNative using react-native-maps)
    问题 我正在开发地图位置。 当我点击某个特定的地方时,我会得到纬度和经度,但不是当前的位置、纬度和经度。 我不知道怎么查。 我怎样才能得到它们,我怎样才能把标记放在那个位置? 这是我的代码: class Maps extends React.Component { constructor(props) { super(props); this.state = { region: { latitude: LATITUDE, longitude: LONGITUDE, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA, }, marker: { latlng:{ latitude: null, longitude: null, latitudeDelta: LATITUDE_DELTA, longitudeDelta: LONGITUDE_DELTA } } } } componentDidMount() { navigator.geolocation.getCurrentPosition ( (position) => { alert("value:" + position) }, (error) => { console.log(error) }, { enableHighAccuracy: true
  • ReactNative TypeError:undefined 不是一个对象(评估'Object.keys(dataBlob[sectionID])')(ReactNative TypeError: undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])'))
    问题 我在 iOS 模拟器中运行以下代码,但我得到 undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])') 错误。 拜托,你能帮我看看我做错了什么吗? this.state = { dataSource: this.ds.cloneWithRows(props.projects) , <== ERROR POINT initialLoading: false, refreshing: false }; //import liraries import React, {Component} from 'react'; import {View, StyleSheet, Alert, ScrollView, RefreshControl, ListView, ActivityIndicator} from 'react-native'; import PropTypes from 'prop-types'; import ViewPropTypes from 'react-native'; import StatusBar from '../components/common/StatusBar'; import Header from '../components/common/Header
  • ReactNative TextInput placeholderTextColor 似乎不起作用(ReactNative TextInput placeholderTextColor doesn't seem to be working)
    问题 这似乎是这么简单的事,我不明白我怎么没有得到这个权利,但placeholderTextColor在ReactNative的TextInput是不是做了我什么。 http://facebook.github.io/react-native/docs/textinput.html#placeholdertextcolor <TextInput style={styles.input} placeholder="Foobar" placeholderTextColor="#FFFFFF"/> 什么也没做.... 回答1 这有效 - <TextInput placeholder="Enter password" placeholderTextColor="white" /> 希望能帮助到你! 干杯! 回答2 <TextInput value={this.state.environment} onChangeText={(environment) => this.setState({ environment })} placeholder={'Environment'} placeholderTextColor="#202020" secureTextEntry={true} style={styles.input} underlineColorAndroid='rgba(0,0,0
  • ReactNative TypeError: undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])')
    I am running the following code in iOS emulator but I am getting undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])') error. Please, could you help me to see what I am doing wrong? this.state = { dataSource: this.ds.cloneWithRows(props.projects), <== ERROR POINT initialLoading: false, refreshing: false }; //import liraries import React, {Component} from 'react'; import {View, StyleSheet, Alert, ScrollView, RefreshControl, ListView, ActivityIndicator} from 'react-native'; import PropTypes from 'prop-types'; import ViewPropTypes from 'react-native'; import StatusBar from '
  • ReactNative动画浅入LayoutAnimted布局动画
    LayoutAnimated API 总的来说,非常好使,相对于Animated来说使用不要太简单,不用处理各种插值,相比于没啥用的requestAnimationFrame帧动画,代码简洁,性能也好很多。 必要的开头 import { UIManager } from 'react-native'; if (Platform.OS === 'android') { if (UIManager.setLayoutAnimationEnabledExperimental) { UIManager.setLayoutAnimationEnabledExperimental(true); } } 根据文档,android开发需要在入口添加这段代码,可以添加在任何LayoutAnimated代码运行之前,建议添加到index.js等入口文件中. LayoutAnimation.configureNext(config, onAnimationDidEnd?, onAnimationDidFail?) 这个方法用于计划下一次布局所用到的方法,一般常见的会用于componentWIllUpdate方法中,在布局更新的时候启用动画,其中config是动画的主要配置,如下
  • ReactNative使用Navigation、Redux和Saga
    ReactNative使用Navigation、Redux和Saga 备注:这些是本人书写习惯。本人菜鸟一枚,如若有问题希望可以指出来。共同学习进步。 1、创建项目 react-native init DemoApp //创建自己的app 2、添加以下组件 // navigation version 4.+ npm install react-navigation@4.3.7:路由 npm install react-navigation-stack:需要单独安装 npm install react-navigation-tabs:需要单独安装 npm install react-native-reanimated:使用navigation需要安装 npm install react-native-safe-area-context:使用navigation需要安装 npm install @react-native-community/masked-view:使用navigation需要安装 npm install react-native-gesture-handler:使用navigation需要安装 npm install react-native-screens:使用navigation需要安装 npm install react-navigation-redux
  • react-native基础知识以及从零搭建
    React native基础 React native介绍 使用JavaScript和React编写原生移动应用 React Native应用是真正的移动应用,React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。 最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。 英文官网:https://reactnative.dev/ 中文:https://reactnative.cn/ https://react-native.org.cn/ 环境准备 搭建项目框架 expo介绍 http://expo.io 模拟测试环境,增强rn开发的能力,提供组件 使用 Expo CLI 假设已安装 Node.js 10 LTS或更高版本,则可以使用npm安装Expo CLI命令行实用程序: npm install -g expo-cli 或者 yarn global add expo-cli 然后运行以下命令,创建一个名为“rn-basics”本地项目: expo init rn-basics cd rn-basics npm start #
  • ReactNative 内联样式与 Stylesheet.create(ReactNative inline style vs Stylesheet.create)
    问题 我今天遇到了一个问题。 我想确保我的应用看起来不错,这需要我做很多调整,尤其是在边距/填充部分。 我的问题是:哪种方法更好? 创建多个样式表(在父组件上)只是为了适应这些小的变化(我正在使用具有无边距样式表的可重用组件,这些边距将从父组件继承)或者只是让它内联在组件上? 我知道创建样式表可能是更好的方法。 但是为了适应继承的样式,我将使用style={[myComponentStyle, passedDownParentStyle]} <- 它不会创建一个新的样式表,然后首先取消使用 Stylesheet.create 的目的吗? 这方面的专家可以给我一些见解吗? 编辑示例: const Style = Stylesheet.create({ child: { color: 'red' }, parent1: { padding: 5, margin: 10 }, parent2: { padding: 10, margin: 5 } }) class Child { render() { return ( <Text style={[Style.child, this.props.style]}> {this.props.children} </Text> ) } } class Parent1 { render() { return ( <Child style=
  • ReactNative inline style vs Stylesheet.create
    I ran into a problem today. I wanna make sure my app looks good and that requires me to do a lot of tuning especially in margin/padding part. My question is: Which approach better? Create multiple stylesheets (on the parent component) just to accommodate these little changes (i'm using reusable components with margin-less stylesheets, those margins will be inherited from parent component) OR just let it be inlined on the component? I know that creating stylesheet would likely be the better approach. But then to accommodate that inherited styles, I will use style={[myComponentStyle
  • 无法使用 ReactNative fetch 获取数据(Unable to get data using ReactNative fetch)
    问题 我正在尝试从 API 获取数据(我使用 JSON 服务器创建了自己的 Rest API)。 但我无法获取任何东西。 但是,当我导航到 localhost:3000/events 时,我能够看到数据。 我的应用程序中没有其他错误。 我只有在运行应用程序时才得到这个,它说网络请求失败。 所有组件都工作正常。 就是拿不到数据。 我尝试了其他一些在线 API 仍然没有得到任何响应。 我试过异步/等待。 我在 IOS 上使用该应用程序,但也尝试过使用 Andriod。 出现同样的问题。 附上代码片段。 任何帮助将不胜感激。 谢谢 创建了 getEvent 函数: const { manifest } = Constants; const api = manifest.packagerOpts.dev ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`) : `api.example.com`; const url = `http://${api}/events`; export function getEvents() { return fetch(url) .then(response => response.json()) .then(events => events.map(e => ({ ...e, date
  • RN中结合Animated封装一个简单的Toast组件
    直接上代码 import React, {Component} from 'react'; import {StyleSheet, Dimensions, Animated, Easing} from 'react-native'; import PropTypes from 'prop-types'; const HEIGHT = Dimensions.get('screen').height, WIDTH = Dimensions.get('screen').width, beforePostion = { center: 0.5, bottom: 0.85, top: 0.1, }; export default class Toast extends Component { /** * message: 要提示的信息 * position: 提示信息在屏幕中的位置(x,y) * - top 上方 居中 * - center 居中 居中 * - bottom 下方 居中 */ static defaultProps = { message: '', position: 'center', }; static propTypes = { message: PropTypes.string, position: PropTypes.string, }; constructor
  • 去哪儿网 ReactNative 跨小程序多端方案介绍
    1 前言qrn-remax-unir 是由去哪儿网前端技术团队实现的一套将 RN 适配到小程序端的跨端组件,通过该组件库可快速方便的将 RN 源代码直接运行到小程序端。方案参考了 react-native-web 的适配方案,使用 remax 框架来实现适配组件库并达到适配多小程序的目的。和 react-native-web一样,它对 RN 源代码侵入度低,并且调试和替换组件相当方便。方案来自于社区,我们只是合理的应用用来解决我们遇到的业务问题,最终开发了这套组件库,也希望开源出来跟大家分享和共同探讨多端开发之路。下面我们简单介绍下 RN 到小程序的适配方案和适配组件库的点滴。2 多端方案回顾qrn-remax-unir 组件库是整个去哪儿网跨端方案的一个部分,通过整套方案可实现将 RN 代码直接运行到 H5 和小程序,达到跨 IOS,ADR,H5,小程序的目标。整体多端方案的思路是:使用 react-native-web 将 RN 代码适配到 H5 上运行,这也是 RN 官方推荐和集成的方式。在 remax 组件的基础上实现一套 RN 的组件库,借用 remax 来适配到多端(qrn-remax-unir)。借助 webpack 的特性来实现针对不同平台的打包。3 RN 相关多端方案3.1 对 alita 的调研在最初的调研中我们注意到 alita 可以实现将
  • 不断收到错误“未定义不是对象(评估'_this.refs.name.value')”(Keep getting an error "undefined is not an object (evaluating '_this.refs.name.value')")
    问题 我正在做 ReactNative 移动应用程序。 WebApp 运行平稳,一切正常。 但是当我将所有内容转移到移动部分时,在输入字段中输入文本时遇到错误。 我做错了什么,我的错误是什么? 这是我的代码: import React from 'react'; import { StyleSheet, TextInput, View } from 'react-native'; export default class App extends React.Component { state={ message:"Hi {name}, your rating for this app is {rating}" } handleName=()=>{ this.setState({ message:"Hi "+this.refs.name.value+", your rating for this app is {rating}" }) } handleRating=()=>{ this.setState({ message:"Hi "+this.refs.name.value+", your rating for this app is "+this.refs.rating.value }) } render() { return ( <View style={styles
  • 如何滑动在 React Native 中从底部进出?(How to slide <View/> in and out from the bottom in React Native?)
    问题 在 React Native iOS 中,我想在下图中滑入和滑出一个喜欢。 在下面的例子中,当一个按钮被按下时, Payment Information视图从底部弹出,当折叠按钮被按下时,它返回并消失。 这样做的正确方法是什么? 先感谢您! 编辑 回答1 基本上,您需要将视图绝对定位到屏幕底部。 然后将其 y 值转换为等于其高度。 (子视图必须具有特定的高度才能知道移动多少) 这是一个显示结果的操场:https://rnplay.org/apps/n9Gxfg 代码: 'use strict'; import React, {Component} from 'react'; import ReactNative from 'react-native'; const { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Animated } = ReactNative; var isHidden = true; class AppContainer extends Component { constructor(props) { super(props); this.state = { bounceValue: new Animated.Value(100), //This is the initial
  • MapView airbnb ReactNative 无视觉(MapView airbnb ReactNative no visual)
    问题 使用 https://github.com/airbnb/react-native-maps 时的任何想法我得到一个地图网格但没有视觉效果? 我遵循了灌输说明,但在谷歌上找不到像我这样的任何错误。这是我在灌输过程后工作的代码。 工作因为它只显示网格没有地图 import MapView from 'react-native-maps'; import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, map: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, }, }); class Navigatord extends Component { constructor() { super(); } render() { return ( <View style={styles.container}> <MapView style={ styles.map }
  • 如何创建在 React-Native 中检测自动位置的地图(how to create maps which detect automatic location in React-Native)
    问题 我已经在 react-native 中创建了地图,参考 https://github.com/lelandrichardson/react-native-maps 地图已创建,但我想使用 gps 检测自动位置。 这是使用静态纬度和经度呈现地图的代码。 这是我更新的代码。 但它仍然没有呈现完美的位置 getInitialState() { return { initialPosition: 'unknown', lastPosition: 'unknown', }; }, componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); this.setState({initialPosition}); }, {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} ); this.watchID = navigator.geolocation.watchPosition((position) => { var lastPosition = JSON.stringify(position); this.setState(
  • Permission denied - geolocation in React Native
    I've been playing around with React Native, getting custom locations to work and setting the "NSLocationWhenInUseUsageDescription" key. The error, when running on the ios simulator, is this: { "code": 2, "message": "Unable to retrieve location.", "PERMISSION_DENIED": 1, "POSITION_UNAVAILABLE": 2, "TIMEOUT": 3 } This is what I have, pretty much straight from the Geolocation example page https://facebook.github.io/react-native/docs/geolocation.html /* eslint no-console: 0 */ 'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, Text, View, } =
  • Keep getting an error "undefined is not an object (evaluating '_this.refs.name.value')"
    I'm doing the ReactNative mobile app. WebApp runs smoothly and everything works. But when I transfer everything to the mobile part, I'm stuck with an error when I enter the text in input field. What I'm doing wrong and what is my mistake? Here is my code: import React from 'react'; import { StyleSheet, TextInput, View } from 'react-native'; export default class App extends React.Component { state={ message:"Hi {name}, your rating for this app is {rating}" } handleName=()=>{ this.setState({ message:"Hi "+this.refs.name.value+", your rating for this app is {rating}" }) } handleRating=()=>{ this
  • 权限被拒绝 - React Native 中的地理定位(Permission denied - geolocation in React Native)
    问题 我一直在玩 React Native,让自定义位置工作并设置“NSLocationWhenInUseUsageDescription”键。 在ios模拟器上运行时的错误是这样的: { "code": 2, "message": "Unable to retrieve location.", "PERMISSION_DENIED": 1, "POSITION_UNAVAILABLE": 2, "TIMEOUT": 3 } 这就是我所拥有的,几乎直接来自地理定位示例页面 https://facebook.github.io/react-native/docs/geolocation.html /* eslint no-console: 0 */ 'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { StyleSheet, Text, View, } = ReactNative; export default class GeolocationExample extends React.Component { state = { initialPosition: 'unknown' }; componentDidMount() { navigator
  • 传递道具 StackNavigator(Pass Props StackNavigator)
    问题 我尝试在 stacknavigator 上传递道具,这里是我的代码 const MainCart = StackNavigator({ Cart: { screen: CartScreen }, Checkout: { screen: COScreen } /* how to pass 'myprops' in this area? */ }); export default class ReactNative_RefreshControl extends Component { constructor(props) { super(props) } render() { console.log('ReactNative_RefreshControl this.props.myparam : ' + this.props.myparam); return <MainCart myprops = { this.props.myparam } />; //https://reactnavigation.org/docs/navigators/stack#Navigator-Props } } 如何在 StackNavigator 区域传递“myprops”? 谢谢 回答1 反应导航 < 5 如果你想在那个地方传递道具,你必须像这样使用它。 const MainCart =