我正在使用选择器和两个输入/标签构建一个非常简单的应用程序。
目前在我的iphone中看起来像这样。
这是我的代码
const subscription = this.accountsObservable.subscribe(accounts => {
this.accountsArray = accounts;
});
subscription.unsubscribe();
但我希望它看起来如下所示。
我尝试了保证金,填充等等。仍然没有运气。
有人可以告诉我我可以用什么css / flex属性来改变UI,就像我想要的那样?
答案 0 :(得分:1)
我创建了一个Expo Snack,它有一个你想要实现的UI的更近的例子。但我会留给你解决细节。
import React from 'react';
import { StyleSheet, Text, View, TextInput, Picker } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
}
state = {
b1text: 'Kg',
b2text: 'Cm',
weight: '',
height: '',
standard: 'Metric',
};
render() {
return (
<View style={styles.container}>
<View style={styles.top}>
<Picker
selectedValue={this.state.standard}
onValueChange={itemValue => {
this.setState({ standard: itemValue });
if (itemValue === 'Metric') {
this.setState({ b1text: 'Kg' });
this.setState({ b2text: 'Cm' });
}
if (itemValue === 'Imperial') {
this.setState({ b1text: 'Lbs' });
this.setState({ b2text: 'Inches' });
}
}}>
<Picker.Item label="Metric" value="Metric" />
<Picker.Item label="Imperial" value="Imperial" />
</Picker>
</View>
<View style={styles.bottom}>
<TextInput
style={{
height: 40,
width: 60,
borderColor: 'gray',
borderWidth: 1,
}}
onChangeText={() => this.setState({ text: weight })}
value={this.state.weight}
/>
<Text>{this.state.b1text}</Text>
<TextInput
style={{
height: 40,
width: 60,
borderColor: 'gray',
borderWidth: 1,
}}
onChangeText={() => this.setState({ text: height })}
value={this.state.height}
/>
<Text>{this.state.b2text}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
top: {
width: '100%',
flex: 1,
},
bottom: {
flex: 1,
alignItems: 'center',
},
});
您需要学习的一个重要事项是学习如何使用react-native
编写样式。这是一个资源,其中包含您可以使用const {StyleSheet} from 'react-native'.