Question

我是React Native的新用户（在Swift中体验iOS开发人员），我似乎无法在线找到有关如何移动UI元素以响应触摸事件的信息。（或者也许我在搜索堆栈溢出时非常糟糕lol）。

最终，我希望屏幕中央有一个文本框，当用户开始输入（或点击框开始输入时），该框将滑动到屏幕顶部。但是我甚至找不到一个简单的教程。我知道我可以有一个const样式来定义文本框的样式/位置方面，我可以创建第二个样式，然后在按钮上点击我可以更改文本框的样式并重新渲染，但它似乎有点过分制作完整的第二种风格，只有一种属性在变化。

有人可以提供示例React Native代码，屏幕上有文本标签和按钮，当用户点击按钮时，标签会从按钮上方移动到按钮下方吗？

Answer 1

查看此触摸移动元素的示例。我使用<TouchableWithoutFeedback>和onPressIn。当你触摸它时，它会改变它的x和y位置：

https://snack.expo.io/@noitsnack/onpressin-twice

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, Image, Dimensions } from 'react-native';

import IMAGE_EXPO from './assets/expo.symbol.white.png'

const IMAGE_SIZE = 100;

export default class App extends Component {
    state = {
        score: 0,
        ...getRandXY()
    }
    render() {
        const { score, x, y } = this.state;
        return (
            <View style={{flex:1, backgroundColor:'steelblue' }}>
                <Text style={{fontSize:72, textAlign:'center'}}>{score}</Text>
                <TouchableWithoutFeedback onPressIn={this.addScore}>
                    <Image source={IMAGE_EXPO} style={{ width:IMAGE_SIZE, height:IMAGE_SIZE, left:x, top:y, position:'absolute' }} />
                </TouchableWithoutFeedback>
            </View>
        )
    }

    addScore = e => {
        this.setState(({ score }) => ({ score:score+1, ...getRandXY() }));
    }
}

function getRandXY() {
    return {
        x: getRandInt(0, Dimensions.get('window').width - IMAGE_SIZE),
        y: getRandInt(0, Dimensions.get('window').height - IMAGE_SIZE)
    }
}

function getRandInt(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

一旦你向下移动，你可以转到Animation API以获得滑动效果。

React Native - 点击移动按钮

1 个答案: