Question

我试图通过更改本地状态对象中名为“selectedTimeKey”的预定义对象来更改Icon的颜色。我想将已按下的图标设置为粉红色并将其他图标设置为白色。但我发现在按下View标签后它没有重新渲染屏幕。它只会导致程序空闲并且计算机运行缓慢。所以我在这里遇到的方法可能会有一些问题。请帮我解决问题。谢谢！

    import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Modal from 'react-native-modal';
import { Icon } from 'react-native-elements';

class FilterTimeView extends React.Component {
  state = {
    'selectedTimeKey': -1
  }

  renderTickIcon(key) {
    console.log(this.state.selectedTimeKey);
    console.log(key);
    return (
      <Icon
        name='check'
        type='MaterialIcons'
        color={this.state.selectedTimeKey === key ? '#f50' : 'white' }
      />
    )
  }

  onTimeSelect = (i) => {
    this.setState({
      'selectedTimeKey': i
    })
  }


  render () {
    const { title, all, timegroups } = this.props.filterTimeViewProps;
    return (
      <View style={styles.modalContent}>
        <Text style={{ marginLeft: 5,  fontWeight: 'bold', fontSize: 18 }}>{title}</Text>
        <View style={{ flexDirection: 'row' }}>
          <View style={{ height: 300, marginTop: 15, justifyContent: 'space-between' }}>
          <View onPress={() => this.onTimeSelect(-1)}  style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <View>
              <Text>{all}</Text>
            </View>
            <View>
              {this.renderTickIcon(-1)}
            </View>
          </View>
            {timegroups.map((time, i) => (
              <View key={i} onPress={this.onTimeSelect(i)} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <View style={{ width: '80%' }}>
                  <Text>{time.title}</Text>
                  <Text>{time.description}</Text>
                </View>
                <View style={{ width: '20%' }}>
                    {this.renderTickIcon(i)}

                </View>
              </View>
            ) )}

          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  captionText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#ffffff'
  },
  modalContent: {
    margin: 50,
    backgroundColor: 'white',
    padding: 22,
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  }
});

export default FilterTimeView;

Answer 1

下面：

<View key={i} onPress={this.onTimeSelect(i)} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

更改为：

<TouchableOpacity key={i} onPress={() => this.onTimeSelect(i)} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

调用onPress回调后屏幕渲染失败

1 个答案: