React Native 学习手记（四）

本章节主要介绍

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

处理文本输入

• 使用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 (
            
                 this.setState({
                                       text
                                   }) }
                    value={ this.state.text } />
                
                    { this.state.text.split(' ').map((word) => word && '').join(' ') }
                
            
            );
    }
}

处理触摸事件

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 (
            
                
                    
                
                
                    
                
                
                    
                    
                
            
            );
    }
}

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 (
            
                
                    
                        
                            TouchableHighlight
                        
                    
                
                
                    
                        
                            TouchableOpacity
                        
                    
                
                
                    
                        
                            TouchableNativeFeedback
                        
                    
                
                
                    
                        
                            TouchableWithoutFeedback
                        
                    
                
                
                    
                        
                            Touchable with Long Press
                        
                    
                
            
            );
    }
}

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。