javascript - 为什么我的 map 函数返回 View 不起作用？

Question

我创建了一个ListView，并给它的id为0、1、2...

就我而言，当我在 renderDescription 函数中单击 id 为 1 的 ListItem 时，我可以看到 TextView 显示在我的设备。

但是，如果我单击 id 为 0 的 ListItem，我就看不到任何 TextView。我通过控制台记录它，我可以看到 First text 和 Second text 日志。所以我认为 map 功能是正确的，我无法弄清楚为什么当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 log可以看到值)

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

您需要将 map 中的值返回到您的函数才能渲染它。

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