用可点击项反应本机FlatList

Question

I'm building a custom line style for a react-native FlatList .

I want the user to navigate to item details when clicking on the line text, or navigate to another page (drill down next level) when clicked on the right caret, something like:

Here is my current list components code:

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

And my list item component:

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

Problems I'm facing:

a. Clicking on text is not working properly. Sometimes it navigates but most of time I cannot navigate, specially if I click on the empty space between the text and the caret.

b. I simply cannot style the fontSize of the text.

c. I'm not being able to space then accordingly.

d. I need to vertical center both itens on row.

Here is what I'm getting for now:

Answer 1

a. Try to make the text full the cell. I can see your text just in 50% of the cell. style <Text> with height: 44

b. fontsize has to be placed in the <Text> component. You are placing it in <View> component

c. "I'm not being able to space then accordingly". I can't get your point clearly.

d. Try justifyContent: 'center' in iconContainer

Answer 2

For part a I would suggest an improvement over Anthu's answer:

I you want the entire textContainer to be clickable I suggest using TouchableWithoutFeedback (or another Touchable which suits your needs) and wrap this around the textContainer View

Answer 3

For the clicking issue, you could set an TouchableHighlight or a TouchableOpacity for the View .

For spacing and alignment issues, maybe you could set the text to flex: 9 and the icon to flex: 1 with FlexBox. Here are the docs for that https://facebook.github.io/react-native/docs/flexbox.html .