React Native FlatList 与可点击项目答案

【问题标题】：React Native FlatList with clickable itemsReact Native FlatList 与可点击项目
【发布时间】：2018-06-04 21:16:09
【问题描述】：

我正在为 react-native FlatList 构建自定义线条样式。

我希望用户在单击行文本时导航到项目详细信息，或者在单击右侧插入符号时导航到另一个页面（向下钻取），例如：

这是我当前的列表组件代码：

class MyList extends Component {
  handleShowDetails = index => {
    ...
  };


  handleDrillDown = index => {
    ...
  }

  render = () => {
    let data = // Whatever data here

    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <MyListItem
              onTextPress={this.handleShowDetails}
              onCaretPress={this.handleDrillDown}
              item={item}
            />
          )}
        />
      </View>
    );
  };
}

export default MyList;

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
    backgroundColor: colors.white,
    borderStyle: "solid",
    marginBottom: 1
  }
});

还有我的列表项组件：

class MyListItem extends Component {
  handleTextPress = () => {
    if (this.props.onTextPress) this.props.onTextPress(this.props.item.id);
  };

  handleIconPress =() => {
    if (this.props.onCaretPress) this.props.onCaretPress(this.props.item.id)
  }

  render = () => {
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text onPress={this.handleTextPress}>{this.props.item.title}</Text>
        </View>
        <View style={styles.iconContainer}>
          <Button onPress={this.handleIconPress}>
            <Icon name="ios-arrow-forward"/>
          </Button>
        </View>
      </View>
    );
  };
}

export default MyListItem;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: colors.white,
    marginBottom: 1,
    height: 30
  },
  textContainer: {
    backgroundColor: colors.light,
    paddingLeft: 5,
    fontSize: 26
  },
  iconContainer: {
    alignSelf: "flex-end",
    backgroundColor: colors.primary,
    paddingRight: 5, 
    fontSize: 26
  }
});

我面临的问题：

一个。单击文本无法正常工作。有时它会导航，但大多数时候我无法导航，特别是当我点击文本和插入符号之间的空白区域时。

b.我根本无法设置文本的 fontSize 样式。

c。我无法相应地间隔。

d。我需要在行上垂直居中。

这是我现在得到的：

【问题讨论】：

标签： javascript react-native

【解决方案1】：

对于点击问题，您可以为View 设置TouchableHighlight 或TouchableOpacity。

对于间距和对齐问题，也许您可以使用 FlexBox 将文本设置为 flex: 9 并将图标设置为 flex: 1。这是https://facebook.github.io/react-native/docs/flexbox.html 的文档。

【讨论】：

【解决方案2】：

一个。尝试使文本充满单元格。我可以在 50% 的单元格中看到您的文字。样式 <Text> 和 height: 44

b. fontsize 必须放在 <Text> 组件中。你把它放在<View> 组件中

c。 “我无法相应地进行空间”。我不能清楚地理解你的意思。

d。在iconContainer 中尝试justifyContent: 'center'

【讨论】：

【解决方案3】：

对于 a 部分，我建议对 Anthu 的回答进行改进：

如果您希望整个 textContainer 可以点击，我建议使用 TouchableWithoutFeedback（或其他适合您需要的 Touchable）并将其包裹在 textContainer 视图中

【讨论】：