Question

React native不会在或中显示我的任何状态。但是他们正在处理各种功能。

这是我的代码：

import {
  StyleSheet,
  View,
  Image,
  Text, //Important
  PanResponder,
  Animated,
  Dimensions,
  Button,
  Slider,
  TouchableWithoutFeedback,
  Alert,
  TouchableOpacity,
  TouchableHighlight,
  Modal, // Important    
} from 'react-native'

我的构造函数：

constructor(props) {
    super(props);
    this.state = {ModalMenu: false};
    this.state = {ModalKunst: false};
    this.state = {ModalArtwork: false};
    this.state = { viewRef: null };
    this.state = { age: 150 };
    this.state = { farbe: 'black'};
    this.state = {ModalPrice: false};

    this.state = {
       TextInputName: '',
       TextInputEmail: '', 
    }
    this.state = { 
      TextInputName2: '',
      TextInputEmail2: ''
    } 
}

显示状态：

  render() {
    const {birthday, name, bio, id, id2} = this.props.profile
    const profileAge = this.calcAge(birthday)
    var fbImage = require('./img/bild12.jpg')

    const rotateCard = this.pan.x.interpolate({
      inputRange: [-200, 0, 200],
      outputRange: ['10deg', '0deg', '-10deg'],
    })
    const animatedStyle = {
      transform: [
        {translateX: this.pan.x},
        {translateY: this.pan.y},
        {rotate: rotateCard},
      ]
    }    
     return (    
        <View><Text>{this.state.age}</Text></View>
     );
  }}

但它没有显示:( 我也没有收到错误如果有人可以帮助我，那将是非常好的。我更新了所有渲染代码

Answer 1

在构造函数中，请立即进行所有初始化。每个this.state = {}语句都会覆盖之前的this.state

使用以下代码替换您的构造函数。

this.state = {
    ModalMenu: false,
    ModalKunst: false,
    viewRef: null,
    age: 150,
    farbe: 'black',
    ModalPrice: false
};

Answer 2

下面是示例代码试试这个..

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

export default class App extends Component {
   constructor(){
        super();
        this.state = {age: '25'};
    }
  render() {
    return (
      <View >
        <Text style={styles.paragraph}>
           {this.state.age}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  paragraph: {
    margin: 44,
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

Answer 3

您的渲染方法不会返回任何内容。在里面添加返回渲染方法。

改变这一点：

render() {
 *not important*
}

to：

render() {
  return (
   <View><Text>{this.state.age}</Text></View>
  );
}

Answer 4

目前，你一直在压倒你的状态，我已经将你的代码整理得有点下面了，这里有一些要注意我已经完成的事情......

您需要从＆＃39;反应中导入React。利用＆＃39;组件＆＃39;因为你的班级需要从中扩展。
你需要使用一个类，因为你有状态
您可以使用fbImage
养成每个组件的导出默认值是个好习惯。
您不需要调用构造函数和super，只需简单地执行state = {}就可以为您执行此操作
将您所有的州置于一个州对象中，不要继续回忆州

考虑一下您的通用代码格式（就其外观而言），更容易阅读的代码将帮助您更轻松地识别错误！

import React from 'react'
import {
  StyleSheet,
  View,
  Image,
  Text, //Important
  PanResponder,
  Animated,
  Dimensions,
  Button,
  Slider,
  TouchableWithoutFeedback,
  Alert,
  TouchableOpacity,
  TouchableHighlight,
  Modal, // Important    
} from 'react-native'

import fbImage from './img/bild12.jpg'

export default class App extends React.Component {
    state = {
    age: 150,
    farbe: 'black',
    ModalArtwork: false,
    ModalKunst: false,
    ModalMenu: false,
    ModalPrice: false,
    TextInputName: '',
    TextInputEmail: '',
    TextInputName2: '',
    TextInputEmail2: '',
    viewRef: null,
}

    render() {

        const {birthday, name, bio, id, id2} = this.props.profile
        const profileAge = this.calcAge(birthday)

        const rotateCard = this.pan.x.interpolate(
            {
                inputRange: [-200, 0, 200],
                outputRange: ['10deg', '0deg', '-10deg'],
            }
        )

        const animatedStyle = {
            transform: [
                {translateX: this.pan.x},
                {translateY: this.pan.y},
                {rotate: rotateCard},
            ]
        }   

     return (    
        <View>
            <Text>
                {this.state.age}
            </Text>
        </View>
     )

  }

}

React native不会在文本

4 个答案: