React Native 样式问题

Question

我在嵌套视图内的 React Native 中设置样式时遇到问题。

期望的结果：

我的设计：

如您所见，我在水平分配文本时遇到了问题

代码：

let width = Dimensions.get('window').width - 42;

const styles = StyleSheet.create({
  cardBorder: {
    marginTop: 25,
    marginLeft: 20,
    marginRight: 20,
    borderColor: "grey",
    borderWidth: 1,
    borderRadius: 5,
    overflow: 'hidden',
  },
  titleText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 10,
    fontSize: 17,
    flex: 1,
  },
  priceText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    fontSize: 17,
    alignSelf: 'flex-end',
    flex: 1,
  },
});

export default class CardDetailScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <HeaderReturn />
        <View style={styles.cardBorder}>
          <Image
            style={{ height: width, width: width }}
            source={{ uri: testData[0].uri }}
          />
          <View
            style={{
              flexDirection: 'row',
              justifyContent: "space-between",
            }}
          >
            <Text style={styles.titleText}>{testData[0].name}</Text>
            <Text style={styles.priceText}>{testData[0].price}</Text>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

非常感谢任何帮助，它看起来非常简单，但我就是无法让它工作。谢谢！

Answer 1

尝试将您的 styles.cardBorder 设置为 alignItems: 'center' 和 'width': '100%'。我认为您的文本在其容器中居中很好，但容器没有占据整个宽度。也许你只需要 'width': '100%'.

Answer 2

您似乎想在视图左侧显示名称，在右侧显示价格。所以你可以这样试试，

priceText: {
    ...FONT_SEMI_BOLD,
    marginTop: 10,
    marginLeft: 'auto',
    marginRight: 10,
    fontSize: 17,
},

只需提及您的 marginLeft: 'auto'。同时从父视图的样式中删除 justifyContent: "space-between",。

React Native 样式问题

React Native Styling problems

styling

react-native

react-native-stylesheet