Typescript 在Mac和Windows上运行的Web应用程序出现这种对齐差异的原因是什么(ReactNative)

我们有一个由Reaction Native编写的Web应用程序.当我在Windows和Mac上运行该应用程序时，列表中列的对齐方式会发生变化，如照片所示.我有很多其他的 list ，但我没有在其中任何一个中经历过这个问题.然而，我在Windows上开发了之前的列表，而我在Mac上开发了这个特定的列表.

alignment on windows

alignment on mac

平面列表:

<FlatList
                  data={pageList}
                  keyExtractor={(item, index) => 'ti_' + index}
                  renderItem={({item}) => <CompilerListItem data={item} isSelected={selectItems.includes(item.branchName)} _onSelectChanges={onSelectChanges} />}
                />

编译器列表项:

<View style={styles.container}>
      <DataTable.Cell
        style={styles.checkBox}
        onPress={() => {
          setIsSelected(!isSelected)
        }}>
        <Checkbox status={isSelected ? 'checked' : 'unchecked'} />
      </DataTable.Cell>
      <FlatList //
        data={props.data.vwCompilerList}
        style={styles.arrayItem}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => <CompilerListItemIssue data={item} />}
      />
</View>

编译器ListItemIssue:

<>
      <DataTable.Cell key={props.data.issueId} onPress={() => handleItemPress(props.data.issueId, false)} onLongPress={() => handleItemPress(props.data.issueId, true)}>
        <View style={styles.cellContainer}>
          <IssueCode style={[styles.issueCellItem, styles.issueCode]} issueCode={props.data.issueCode} priority={undefined} fontSize={17} />
          <View style={[styles.issueCellItem, styles.f2]}>
            <TableTitle numberOfLines={1}>{props.data.issueSummary}</TableTitle>
          </View>
          <View style={[styles.issueCellItem, styles.imageArea]}>
            <ProfileAvatarItem size={36} uri={props.data._assigneeUserImage} />
          </View>
          <View style={[styles.issueCellItem, styles.statusResult]}>
            <Table2ndText>{props.data.issueStatusStr}</Table2ndText>
          </View>
          <View style={[styles.issueCellItem, styles.testBoxesField]}>
            <View style={styles.testedApproveBox}>
              <Table2ndText style={{color: theme.colors.background}}>{props.data.testOnay ?? '?'}</Table2ndText>
            </View>

            <View style={styles.testedRejectedBox}>
              <Table2ndText style={{color: theme.colors.background}}>{props.data.testRed ?? '?'}</Table2ndText>
            </View>
          </View>
        </View>
      </DataTable.Cell>
      <Snackbar duration={3000} visible={snackVisible} onDismiss={() => setSnackVisible(false)} style={styles.snackbar}>
        {snackText}
      </Snackbar>
    </>

编译器ListItemIssue样式:

issueCode: {
      minWidth: 110,
    },
    f2: {
      flex: 2,
    },
    cellContainer: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 5,
    },
    issueCellItem: {
      marginEnd: 10,
    },
    statusResult: {
      minWidth: 200,
    },
    checkBox: {
      justifyContent: 'center',
      maxWidth: 40,
      marginEnd: 10,
    },
    testBoxesField: {
      flexDirection: 'row',
      minWidth: 75,
    },
    testedApproveBox: {
      backgroundColor: theme.colors.valid,
      borderRadius: 5,
      height: 25,
      width: 25,
      alignItems: 'center',
      justifyContent: 'center',
      marginHorizontal: 3,
    },
    testedRejectedBox: {
      backgroundColor: theme.colors.error,
      borderRadius: 5,
      height: 25,
      width: 25,
      alignItems: 'center',
      justifyContent: 'center',
      marginHorizontal: 3,
    },
    imageArea: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      minWidth: 60,
      marginHorizontal: 10,
    },
    snackbar: {
      backgroundColor: theme.colors.error,
      alignSelf: 'center',
    },