RN Android：当2行文本时，按钮占用太多空间

Question

我有这个按钮

const TestButton = ({ text }) => (
  <View
    style={{
      width: '100%',
      marginTop: 10,
      padding: 10,
      backgroundColor: 'red',
      flexDirection: 'row',
      justifyContent: 'center',
    }}>
    <View
      style={{
        backgroundColor: 'green',
        padding: 10,
        flexDirection: 'row',
        alignItems: 'center',
      }}>
      <Text numberOfLines={2}>{text}</Text>
    </View>
  </View>
);

我希望按钮尽可能小，并且居中。

的Android

在Android上，你可以看到并非如此。对于3种情况，我们可以清楚地看到按钮（绿色）比它应该大得多，并占用所有可用空间。

的iOS

在iOS上，你可以看到它看起来像我期望的那样工作。

这是一个错误吗？在Android上有解决此问题的解决方法吗？

这是重现的Expo snack。

Answer 1

试试这个

public class parseDocx {
public static void parse(String src,String dest) {
    try {
        FileInputStream fis = new FileInputStream(src);
        XWPFDocument docx = new XWPFDocument(OPCPackage.open(fis));
        XWPFWordExtractor extractor = new XWPFWordExtractor(docx);
        FileWriter fw = new FileWriter(dest);
        String[] Linelist = extractor.getText().split("[\\r?\\n]+");
        for(String str : Linelist){
            fw.write(str + "\r\n");
        }
        fw.flush();
        fis.close();
        fw.close();
        System.out.println(extractor.getText());
    }catch(IOException | InvalidFormatException ex) {} 
}

Answer 2

我可以通过将标签包装到容器中来解决问题：

  itemContainer: {
    flex: 1,
    marginHorizontal: 25,
    paddingVertical: 15,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  itemView: {
    width: "100%"
  },
  newsTitle: {
    fontSize: 20,
    color: darkBlue,
    paddingRight: 20,
    fontFamily: "Helvetica-middle",
    borderColor: darkBlue,
    borderWidth: 1
  },
  newsChannel: {
    paddingTop: 10,
    fontSize: 16,
    fontFamily: "Helvetica",
    color: darkGrey
  },

  return (
      <TouchableOpacity style={styles.itemContainer}>
        <View style={styles.itemView}>
          <Text style={styles.newsTitle}>{news.title}</Text>
          <Text style={styles.newsChannel}>{newsChannelTitle}</Text>
        </View>

        <ArrowIcon />
      </TouchableOpacity>
    );