本章节主要介绍

• 处理文本输入
• 处理触摸事件
• 使用滚动视图

处理文本输入

• 使用TextInput组件处理文本输入
• onChangeText监听输入变化

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

export default class PizzaTranslator extends Component {
    state = {
        text: ''
    }

    render() {
        return (
            <View style={ { padding: 10 } }>
                <TextInput
                    style={ { height: 40 } }
                    placeholder="Type here to translate!"
                    onChangeText={ (text) => this.setState({
                                       text
                                   }) }
                    value={ this.state.text } />
                <Text style={ { padding: 10, fontSize: 42 } }>
                    { this.state.text.split(' ').map((word) => word && '🍕').join(' ') }
                </Text>
            </View>
            );
    }
}

处理触摸事件

Button

先来看一下Button的点击事件。

import React, { Component } from 'react';
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
    _onPressButton() {
        Alert.alert('You tapped the button!')
    }

    render() {
        return (
            <View style={ styles.container }>
                <View style={ styles.buttonContainer }>
                    <Button onPress={ this._onPressButton } title="Press Me" />
                </View>
                <View style={ styles.buttonContainer }>
                    <Button onPress={ this._onPressButton } title="Press Me" color="#841584" />
                </View>
                <View style={ styles.alternativeLayoutButtonContainer }>
                    <Button onPress={ this._onPressButton } title="This looks great!" />
                    <Button onPress={ this._onPressButton } title="OK!" color="#841584" />
                </View>
            </View>
            );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20
    },
    alternativeLayoutButtonContainer: {
        margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

Touchable系列组件

• 可用TouchableHighlight制作按钮或者链接。
• 安卓可用TouchableNativeFeedback制作涟漪效果按钮。
• TouchableOpacity按钮按下时会降低按钮透明度。
• 如果不需要任何视觉反馈，使用TouchableWithoutFeedback。

import React, { Component } from 'react';
import { Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
    _onPressButton() {
        Alert.alert('You tapped the button!')
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!')
    }


    render() {
        return (
            <View style={ styles.container }>
                <TouchableHighlight onPress={ this._onPressButton } underlayColor="white">
                    <View style={ styles.button }>
                        <Text style={ styles.buttonText }>
                            TouchableHighlight
                        </Text>
                    </View>
                </TouchableHighlight>
                <TouchableOpacity onPress={ this._onPressButton }>
                    <View style={ styles.button }>
                        <Text style={ styles.buttonText }>
                            TouchableOpacity
                        </Text>
                    </View>
                </TouchableOpacity>
                <TouchableNativeFeedback onPress={ this._onPressButton } background={ Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : '' }>
                    <View style={ styles.button }>
                        <Text style={ styles.buttonText }>
                            TouchableNativeFeedback
                        </Text>
                    </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback onPress={ this._onPressButton }>
                    <View style={ styles.button }>
                        <Text style={ styles.buttonText }>
                            TouchableWithoutFeedback
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableHighlight onPress={ this._onPressButton } onLongPress={ this._onLongPressButton } underlayColor="white">
                    <View style={ styles.button }>
                        <Text style={ styles.buttonText }>
                            Touchable with Long Press
                        </Text>
                    </View>
                </TouchableHighlight>
            </View>
            );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
    },
    buttonText: {
        padding: 20,
        color: 'white'
    }
})

使用滚动视图

• ScrollView为滚动容器，可以放多个组件和视图。
• 可以竖着滚，也可以横着滚(horizontal)。
• 适合显示数量不多的滚动元素，放在ScrollView中的所有组件都会被渲染。
• 长列表应该使用FlatList。