React-Native中Link组件内View与Text溢出问题求助

我查阅了大量同类问题的讨论，但均未解决我的问题，推测可能是因为组件嵌套在Link内导致。

NoteCard组件代码 #

<View style={styles.outterCard}>
  <Link
    href={{
      pathname: "/note/[id]",
      params: { id: id },
    }}
    style={styles.link}
  >
    <View
      style={styles.innerview}
    >
      <Text style={styles.noteTitle} numberOfLines={1} ellipsizeMode="tail">{note.title}</Text>
      <Text style={styles.noteContent} numberOfLines={2} ellipsizeMode="tail">{note.content}</Text>
    </View>
  </Link>
</View>

对应样式代码 #

const styles = StyleSheet.create({
  outterCard: {
    backgroundColor: "transparent",
    width: "50%",
    paddingHorizontal: 4,
    paddingVertical: 4,
  },
  link: {
    backgroundColor: "rgb(41,42,43)",
    paddingTop: 5,
    paddingRight: 5,
    paddingBottom: 10,
    paddingLeft: 10,
    width: "100%",
    borderRadius: 5,
  },
  innerview: {
    width: "100%",
    flex: 1,
    flexShrink: 1,
    borderWidth: 1,
    borderColor: 'red',
  },
  noteTitle: {
    color: "rgb(225,190,220)",
  },
  noteContent: {
    color: "rgb(160,160,160)",
    width: "100%",
    flex: 1,
    flexShrink: 1,
    borderWidth: 1,
    borderColor: 'blue',
  },
});

问题截图 #

FlatList渲染代码 #

<FlatList
  data={notes}
  numColumns={2}
  keyExtractor={(note) => note.id}
  renderItem={({ item }) => (
    <NoteCard id={item.id} />
  )}
  style={styles.flatList}
  columnWrapperStyle={styles.columnWrapper}
  contentContainerStyle={styles.contentContainer}
/>

FlatList对应样式代码 #

flatList: {
  width: '100%',
  padding: 4,
  paddingTop: 50,
},
columnWrapper: {
  flex: 1,
  justifyContent: 'space-between',
},
contentContainer: {

},

内容的提问来源于stack exchange，提问作者Daniel Guedes