react-native - 在三元运算符中不工作状态的样式

Question

请告诉我为什么三元运算符不从 StyleSheet 中的状态中获取值

在输入样式中，三元运算符不理解来自状态的值

在textinput focus时，state的值变为true，改变的时候，我想改变样式，不然怎么实现

import React, { Component } from 'react';
import { TextInput,
    View,
    StyleSheet,
    FlatList,
    Text,
    TouchableOpacity
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';

export default class Chat extends Component {
    constructor() {
        super();
        this.state = {
            items: [],
            text: '',
            sendButtonVisible: false
        };
    }
    sendMessage = () => {
        let message = this.state.text;
        if (message != '') {    
            this.state.items.push({
                key: message,
                dateTime: this.dateTime()
            });
            this.setState({
                items: [...this.state.items],
                text: ''
            });
        }
    }
    dateTime = () => {
        let date = new Date();
        addZero = (num) => {
            if(num >= 0 && num < 10) {
                return `0${num}`;
            }
            return num;
        }
        let dateTime = `${addZero(date.getHours())}:${addZero(date.getMinutes())}`;
        return(dateTime);
    }
    sendButtonVisible = () => {
        if (this.state.sendButtonVisible) {
            return(
                <TouchableOpacity style={styles.sendButton} onPress={this.sendMessage}>
                    <Icon name='send' color='rgb(255, 255, 255)' size={25} />
                </TouchableOpacity>
            );
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.flatListBox}>
                    <FlatList
                        data={this.state.items}
                        renderItem={({item}) => 
                            <View style={styles.messageBlock}>
                                <Text style={styles.message}>
                                    {item.key}
                                    <Text style={{fontSize: 10}}>{item.dateTime}</Text>
                                </Text>
                            </View>                     
                        }
                    />
                </View>
                <View style={styles.inputBox}>
                    <TextInput
                        style={styles.input}
                        value={this.state.text}
                        onChangeText={(text) => this.setState({text})}
                        onFocus={() => this.setState({sendButtonVisible: true})}
                        onBlur={() => this.setState({sendButtonVisible: false})}
                        placeholder='Write a message'
                    />
                    {this.sendButtonVisible()}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'flex-end',
        backgroundColor: 'rgb(255, 255, 255)'
    },
    inputBox: {
        flexDirection: 'row',
        margin: 10
    },
    input: {
        flex: 6,
        borderColor: 'rgb(227, 227, 227)',
        backgroundColor: 'rgb(227, 227, 227)',
        borderWidth: 1,
        borderRadius: 10,
        //borderTopRightRadius: (this.state.sendButtonVisible) ? 0 : 10,
        //borderBottomRightRadius: (this.state.sendButtonVisible) ? 0 : 10,
        fontSize: 16,
        paddingLeft: 15
    },
    sendButton: {
        flex: 1,
        backgroundColor: 'rgb(0, 206, 209)',
        justifyContent: 'center',
        alignItems: 'center',
        borderTopRightRadius: 10,
        borderBottomRightRadius: 10
    },
    flatListBox: {
        flex: 1,
        alignItems: 'flex-end',
        margin: 10
    },
    messageBlock: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginTop: 2,
    },
    message: {
        fontSize: 16,
        backgroundColor: 'rgb(0, 206, 209)',
        paddingHorizontal: 10,
        paddingBottom: 6,
        paddingTop: 4,
        borderRadius: 15,
        color: '#fff'
    }
});

在此处输入图像描述

标签： react-native

Answer 1

brothis指向当前类，而您正在将样式 const 写入类范围之外，这就是它找不到的原因this.state.sendButtonVisible

你只能在类的范围内使用它。如果您想使用它，请将其移动到类中