用可点击项反应本机FlatList

Question

我正在为本机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。 我需要垂直居中对齐两个行。

这是我现在得到的：

Answer 1

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

b。 fontsize必须放置在<Text>组件中。 您将其放置在<View>组件中

C。 “那么我就不能相应地间隔”。 我不清楚你的意思。

d。 尝试justifyContent: 'center'在iconContainer

Answer 2

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

我希望整个textContainer都是可单击的，我建议使用TouchableWithoutFeedback（或另一个适合您需要的Touchable），并将其包装在textContainer视图周围

Answer 3

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

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