Question

为什么动画不起作用？

所有代码

＆＃13;

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    Image,
    StyleSheet,
    WebView,
    Linking,
    TouchableOpacity,
    Animated,
    Keyboard, 
    TextInput,
    KeyboardAvoidingView
} from 'react-native';

import {
    Button,
    Text,
    Container,
    Card,
    CardItem,
    Body,
    Content,
    Header,
    Title,
    Left,
    Icon,
    Right,
    Form,
    Picker,
    Item
} from 'native-base';

import { Actions } from 'react-native-router-flux';
import { styles, colors, paddings, fonts } from '../styles';
import DefaultInput from "./DefaultInput";
import validate from "./Validation";
import ModalComponent from "./Modal";
import ModalDropdown from 'react-native-modal-dropdown';
import { LinearGradient } from 'expo';
import CheckBox from 'react-native-check-box';

class CheckIn extends Component {
constructor(props) {
    super(props);  
    this.inputMarginTop = new Animated.Value(8);

}

componentWillMount () {
    this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
    this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
  }

  componentWillUnmount() {
    this.keyboardWillShowSub.remove();
    this.keyboardWillHideSub.remove();
  }


 keyboardWillShow = (event) => {
    Animated.timing(this.inputMarginTop, {
      duration: event.duration,
      toValue: 2,
    }).start();
  };

  keyboardWillHide = (event) => {
    Animated.timing(this.inputMarginTop, {
      duration: event.duration,
      toValue: 8,
    }).start();
  };


    render() {
       console.log(this.inputMarginTop._value);
        return (
                  <View style={{height: '100%', alignItems: 'center', flexDirection: 'column'}}>
                          <TextInput
                            style={{width: '90%', height: 20, borderWidth:1, marginTop: 100}}
                          />
                          <View style={{width: '90%'}}>
                              <Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
                           </View>
                    </View>
        );
    }
}
export default CheckIn;

＆＃13;

代码的重要部分

＆＃13;

this.inputMarginTop = new Animated.Value(8);

＆＃13;

<View style={{width: '90%'}}>
   <Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
</View>

＆＃13;

＆＃13; 为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？为什么动画不起作用？

Answer 1

所有的拳头，你在运行哪个设备？如果它是Android，那么它将无效，请在此处找到https://facebook.github.io/react-native/docs/keyboard.html

keyboardWillShow以及keyboardWillHide一般都没有在Android上可用，因为没有本机相应的事件。

如果是iOS，则应使用Animated.View代替Animated.Text。请尝试以下代码：

<Animated.View style={{width: '90%', marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>
   <Text>Имя</Text>
</Animated.View>

通常，对于Text组件，您应将所有与位置/布局相关的样式移动到其父View，Text中的样式通常与font本身相关，例如color，fontSize，fontStyle等。

同时尝试console.log(event.duration)以确保事件包含的持续时间不是0.

为什么动画不起作用？

1 个答案: