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
  }
});

我面临的问题：

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

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

℃。我不能相应的空间。

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

以下是我现在要做的事情：

Answer 1

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

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

中

℃。＆＃34;我没有能够相应的空间＆＃34;。我无法清楚地说明你的观点。

d。在justifyContent: 'center'

中试试iconContainer

Answer 2

对于第一部分，我建议改进Anthu的答案：

我希望整个textContainer可以点击我建议使用TouchableWithoutFeedback（或其他适合你需要的Touchable）并将它包装在textContainer View

Answer 3

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

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

使用可点击项反应Native FlatList

3 个答案: