Question

我创建了一个ListView并将其id设为0,1,2 ...

在我的情况下，当我点击ListItem功能中我的ID为1的renderDescription时，我可以在设备上看到TextView节目。

但如果我点击id为0的ListItem，我看不到任何TextView。我控制台记录它我可以看到First text和Second text日志。所以我认为地图功能是正确的，我无法弄清楚为什么当id为0时我的设备上没有TextView

任何帮助将不胜感激。提前谢谢。

这是MyListItem.js：

import React, { Component } from 'react';
import { 
  Text, 
  Button,
  TouchableWithoutFeedback, 
  TouchableOpacity,
  View,
  LayoutAnimation 
} from 'react-native';
import { List, ListItem } from 'react-native-elements';

class MyListItem extends Component {
  state = {
    expanded: false,
    icon: 'keyboard-arrow-down'
  };
  componentWillUpdate() {
    LayoutAnimation.spring();
  }


  renderDescription(id) {
    const { item } = this.props;
    const cityButtons = [
        {
          text: 'First text',
        }, 
        {
          text: 'Second Text',         
        }
    ];

    if (this.state.expanded) {
        switch(id) {
        case 0:
          cityButtons.map(value => {
            console.log(value.text);
            console.log('Why return is no working ?');
            return (
              <TouchableOpacity 
                style={styles.button}
                onPress={() => console.log('Press !')}
              >                  
                <Text style={styles.buttonText}>{value.text}</Text>
              </TouchableOpacity>
            );
          });
        break;
        case 1:
          return (
              <TouchableOpacity 
                style={styles.button}
                onPress={() => console.log('Press !')}
              >
                <Text style={styles.buttonText}>I can see the TextView on device</Text>
              </TouchableOpacity>

          );   
        break;       
    }
    }
  }

  changeExpanded() {
    this.setState({ 
        expanded: !this.state.expanded, 
        icon: this.state.expanded ? 'keyboard-arrow-down': 'keyboard-arrow-up' 
    });
    console.log('change!');
  }

  render() {
    const { titleStyle } = styles;
    const { title, icon, id } = this.props.item;

    return (
      <TouchableWithoutFeedback
        onPress={() => this.changeExpanded()}
      >
        <View>
          <ListItem
            key={id}
            title={title}
            containerStyle={{ backgroundColor: '#81A3A7' }}
            titleStyle={{ color: '#ffffff' }}
            rightIcon={{ name: this.state.icon }}
          />
          <View style={styles.center}>
            {this.renderDescription(id)}
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
    center: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        backgroundColor: '#C2D3DA'
      },
      button: {
        flex: 1,
        width: '100%',
        margin: 0,
        padding: 10,
        paddingLeft: 18,
        backgroundColor: '#C2D3DA',
        borderRadius: 9,
      },
      buttonText: {
        color: '#585A56',
        fontSize: 15,
        fontWeight: 'bold',
      },
};

export default MyListItem;

尝试像这样修复，它仍然没有工作（consloe日志可以看到值）

case 0:
          return cityButtons.map(value => {
            console.log(value.text);
            <TouchableOpacity 
              style={styles.button}
              onPress={() => console.log('Press !')}
            >                  
              <Text style={styles.buttonText}>{value.text}</Text>
            </TouchableOpacity>
          });
        break;

Answer 1

您需要将值从地图返回到您的函数才能呈现它。

    return cityButtons.map(value => (
          <TouchableOpacity 
            style={styles.button}
            onPress={() => console.log('Press !')}
          >                  
            <Text style={styles.buttonText}>{value.text}</Text>
          </TouchableOpacity>
        );
      );

为什么我的map函数返回视图不起作用？

1 个答案: