无法找到变量:StyleSheet

时间:2018-01-03 19:29:39

标签: javascript reactjs react-native

我正在使用此网站https://www.tutorialspoint.com/react_native/react_native_animations.htm

学习React Native

然而,当我试图在iPhone上打开应用程序时出现问题。根据错误,它无法找到变量,虽然它是导入的。

import React, { Component } from 'react';
import { View, LayoutAnimation, TouchableOpacity, Text, StyleSheet} from 'react-native';

export default class Animations extends Component {
  state = {
    myStyle: {
      height: 100,
      backgroundColor: 'red'
    }
  };
  expandElement = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({
      myStyle: {
        height: 400,
        backgroundColor: 'red'
      }
    })
  };
  collapseElement = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    this.setState({
      myStyle: {
        height: 100,
        backgroundColor: 'red'
      }
    })
  };
  render() {
    return (
      <View>
        <View>
          <View style={this.state.myStyle}/>
        </View>

        <TouchableOpacity>
          <Text style={styles.button} onPress = {this.expandElement}>
            Expand
          </Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button} onPress = {this.collapseElement}>
            Collapse
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    borderWidth: 1,
    borderColor: 'red',
    color: 'red',
    textAlign: 'center',
    marginTop: 50,
    padding: 10
  }
});

2 个答案:

答案 0 :(得分:1)

啊......我发现了这个问题。它在其他组件中有样式但没有元素,并且没有导入StylesSheet,因为我将其更正为新条件但忘记了带样式的块。

答案 1 :(得分:0)

哟谢尔盖!我找到了你的问题。
<View>组件未终止。

<View>
  <View style={this.state.myStyle}/>
</View>

请改为尝试:

<View>
  <View style={this.state.myStyle}/><View>
</View>

在此查看代码或使用您的Expo应用程序扫描QR码进行测试。 https://snack.expo.io/HyTXp6cQG