我已经提到 flex 值为 0.5 但它不起作用

Posted 2023-03-07

【中文标题】我已经提到 flex 值为 0.5 但它不起作用

【英文标题】：I have mentioned flex value to 0.5 but it is not working

【发布时间】：2021-12-02 13:39:30

【问题描述】：

我已经编写了以下代码，但我在“titleContainer”下的 flex 不起作用。

export const Focus = () => 
  return (
    <View style=styles.container>
      <View style=styles.titleContainer>
        <Text style=styles.title>What would you like to focus on?</Text>
        <TextInput />
      </View>
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#43840',
  ,
  titleContainer: 
    flex: 0.5,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#559974',
  ,
  title: 
    color: 'white',
    fontWeight: 'bold',
    fontSize: 15,
  ,
);

请看屏幕截图。绿色背景应覆盖屏幕的一半。

现在解决了！ 实际上这个组件是有条件地显示的。这种情况有问题。我已经解决了这个问题，一切正常。

【问题讨论】：

你想要的是titleContainer占据容器50%的高度吗？

是的！我想要那个。

您需要将父容器设为 display: 'flex' 才能在子标签中使用 flex 属性。

【参考方案1】：

Flex在RN中只取整数值

如果您希望 titleContainer 使用 flex 占用 50% 的容器大小，这就是您可以实现的方法。

您需要另一个视图与 titleContainer 采用相同的 flex 值，因此 titleContainer 和该转储视图将占用父视图的 50% 大小

export const Focus = () => 
  return (
    <View style=styles.container>
      <View style=styles.titleContainer>
        <Text style=styles.title>What would you like to focus on?</Text>
        <TextInput />
      </View>
      <View style=flex: 1 />
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#43840',
  ,
  titleContainer: 
    flex: 1,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#559974',
  ,
  title: 
    color: 'white',
    fontWeight: 'bold',
    fontSize: 15,
  ,
);

【讨论】：

没有效果

@Developer 你是否在 titleContainer 下添加了转储视图

实际上这个组件是有条件地显示的。这种情况有问题。我已经解决了这个问题，一切正常。我很快就会删除这个问题。谢谢！

【参考方案2】：

要在子标签上使用 flex 属性，您的父标签需要有一个 display: "flex" 属性。

container: 
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#43840',
  ,