本机基础中的样式宽度以响应本机似乎不起作用
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)
我目前在 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)