如何保持指定的文本组件宽度视图父级宽度

Question

在此示例中是否有任何可能的方法使 Text 子项保持全宽？

我想保留父级的高度和宽度值以用于其他目的。如果可以的话有什么办法不用专门设置文字宽度吗？

import React from 'react';
import {ImageBackground, StyleSheet, Text, View} from 'react-native';

const App = () => (
  <View style={styles.container}>
      <View style={styles.quack} />
      <Text style={styles.text}>Inside</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    margin: 100,
    height: 50,
    overflow: 'visible'
  },
  quack: {
    width: 50,
    height: 50,
    backgroundColor: 'red'
  },
  text: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'blue',
  },
});

export default App;

我尝试检查此问题的解决方案，但无济于事。

Answer 1

尚不清楚您的目标是什么，但我认为这会有所帮助。 https://snack.expo.dev/jS5Lgob9HDK4EUl4qRc0W

我在文中使用了

flex:1