Question

我正在以原生的方式工作，而我正试图设计一个组件。我有一个包含两个视图（A和B）的视图（黑色边框）。我希望看起来像这样的东西 - 我认为包裹A的视图宽度约为75％，包裹B的视图宽度约为25％。

然而，当这个组件作为列表呈现时，我得到的是这样的 - 其中A视图的宽度取决于它所拥有的文本量。

我能够将宽度设置为特定的数量，但它似乎总是根据我测试它的设备而改变（iPhone 5,6,6 +等不同）。因此，我尝试使用flex样式，但似乎无法正确使用。这是我的样式和组件结构的代码：

const styles = StyleSheet.create({
  title: {
    color: '#000',
    textAlign: 'left',
    fontSize: 80,
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    padding: 0,
    height: 180,
    borderBottomColor: '#888',
    borderBottomWidth: 1,
    alignItems: 'stretch'
  },
  innerContainer: {
    flex: 1,
    padding: 0,
    flexDirection: 'row',
    alignItems: 'stretch',
  },
  sideDivider: {
    flex: 0.8,
    padding: 0,
    backgroundColor: '#cacaca',
    justifyContent: 'center'
  },
  sideDividerArrow: {
    flex: 0.2,
    padding: 0,
    alignItems: 'center',
    backgroundColor: 'cyan',
    justifyContent: 'center',
  },
});

...

render() {
    return (
      <View style={styles.row} ref={component => this._root = component}>
        <TouchableHighlight onPress={this.handleClick.bind(this)}>
          <View style={styles.innerContainer}>
            <View style={styles.sideDivider}>
              <Text style={styles.title}>
                  {this.state.routeData.busNumber}
              </Text>
              <Text>{this.state.routeData.fullRoute}</Text>
            </View>
            <View style={styles.sideDividerArrow}>
              <Text>></Text>
            </View>  
          </View>
        </TouchableHighlight>
      </View>
    )
  }
}

感谢任何和所有帮助。谢谢！

Answer 1

flex属性需要一个整数。我们不能使用分数。

我想渲染以下内容将帮助您实现理想的外观。然后，您可以添加交互并清理内联样式

<View style ={{flexDirection:'row',flex:1,borderColor:'black',borderWidth:1}}>
  <View style ={{flex:3,backgroundColor:'blue',alignItems:'center',justifyContent:'center'}}>
    <Text>A</Text>
  </View>
  <View style ={{flex:1,backgroundColor:'yellow',alignItems:'center',justifyContent:'center'}}>
    <Text>B</Text>
  </View>
</View>

Answer 2

你的图片有3个组件，但代码实际上有更多。如果你这样做，代码应按预期工作：
- row：flex：1（确保行是全宽）+ flexDirection：'row'（因此行子将从左到右）。
- 容器：flex：3。
- B容器：flex：1。
A或B的子女中的至少一个应该具有flex：1（或任何其他数字）以确保儿童也伸展以填充父母。

在你的情况下，给标题和文本组件一个flex：1属性可能会起作用希望这有帮助！

在React Native中使用flex的样式宽度

2 个答案: