用可點擊項反應本機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的文檔。