本机基础中的样式宽度以响应本机似乎不起作用

styles width in native base to react native doesn't seem to be working

我目前在 React-Native 中有一个组件,我正在使用 NativeBase 预设组件。

import React, { Component } from 'react';
import { FlatList, ActivityIndicator, StyleSheet } from 'react-native';
import { Container, Header, Content, ListItem, Text, Input, Item, Button, Left, Right } from 'native-base';

export default class OrderDetail extends Component {
  constructor(props){
    super(props);
    this.state= { isLoading: true }
  }

  componentDidMount() {
    return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.movies,
      }, function() {

      });
    })
    .catch((error) => {
      console.error(error);
    });
  }

  render() {
    return (
      <Container>
        <Header />
        <Content>
        <ListItem itemDivider>
          <Text>Inspection Details</Text>
        </ListItem>
          <FlatList
          data={this.state.dataSource}
          renderItem={({item}) =>
          <ListItem>
            <Left>
              <Text>Address</Text>
            </Left>
            <Right>
              <Text  style={styles.textContent}>{item.title}</Text>
            </Right>
          </ListItem>}
          keyExtractor={({id}, index) => id}
          />
          <ListItem itemDivider>
            <Text>Agent Details</Text>
          </ListItem>
          <ListItem itemDivider>
            <Text>Payment Details</Text>
          </ListItem>
          <Item regular>
            <Input placeholder='Regular Textbox' />
          </Item>
          <Button block success>
            <Text>Start Report</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  areaBox: {
    width: '30%',
  },
  textContent: {
    fontSize: 20,
    color: 'red',
  },
});

我试图让每个 ListItem 都有一个左右区域。所以左边是字段的名称,右边是实际数据。上面的当前示例重复了 "address",这现在并不重要。在我添加的样式中:areaBox width: 30% 因为我希望左边不要占据大部分区域。

我已经尝试这样做了:<Left style={styles.areaBox}> 我希望 Left 只占整个宽度的 30%。然而事实并非如此。这是我的结果:

如您所见,地址仍占据 space 的大部分。我做错了什么?

尝试 flex 而不是 width,React-native 不适用于百分比,

弹性:0.1 = 10%

弹性:0.2 = 20% 等等。

<Left style={{flex:0.3}}>
     <Text>Address</Text>
 </Left>
 <Right style={{flex:0.7}}>
      <Text  style={styles.textContent}>{item.title}</Text>
 </Right>

我把1个flex分成了0.3和0.7,也就是30%和70%

值的总和应始终等于 1,例如(0.3 + 0.7 = 1)