react-native - 在 React Native 中使用 flex 样式宽度

Question

我正在使用 React Native，并且正在尝试设计组件的样式。我有一个包含两个 View (A 和 B)的 View (黑色边框)。我想要看起来像这样的东西 - 包裹 A 的 View 的宽度约为 75%，包裹 B 的 View 的宽度约为 25%。

但是，当此组件呈现为列表时，我得到的是这样的 - 其中 A View 的宽度取决于它包含的文本量。

我能够将宽度设置为特定值，但它似乎总是根据我测试的设备而变化(iPhone 5、6、6 plus 等上有所不同)。因此，我尝试使用 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>