在风景中的选择器

时间:2018-08-23 12:03:37

标签: javascript ios react-native picker native-base

您好,我希望有人能为我提供帮助,因为我已经在互联网上搜索了一段时间,但没有任何结果,而且我是一名初学者。目前,我正在开发本机应用程序。

问题出在应用程序中,我正在使用Native-Base,并且我尝试实现了Picker。但是我意识到,当设备处于横向状态并且正在使用选择器时。即使设备仍在旋转,设备也会变回纵向。

Here is an example of the problem

我有以下代码

export default class ChoosePlatformLanguage extends Component {
  constructor(props) {
    super(props);
    this.state = {
        lang: "",
        platform: ""
    };
  }
  _setLanguage(value) {
    this.setState({ lang: value });
  }
  _setPlatform(value) {
    this.setState({ platform: value });
  }
  render() {
    return (
        <Container>
            <Header>
                <Left />
                <Body>
                  <Title>Platform & Sprache</Title>
                </Body>
                <Right />
            </Header>
            <View>
                <View>
                    <ListItem>
                        <Text>Platform</Text>
                        <Picker
                            supportedOrientations={['portrait', 'landscape']}
                            placeholder="Platform"
                            selectedValue={this.state.platform}
                            onValueChange={this._setPlatform}
                        >
                            <Item label={'Deutschland'} value={'de'} />
                            <Item label={'Österreich'} value={'at'} />
                        </Picker>
                    </ListItem>
                    <ListItem>
                        <Text>Sprache</Text>
                        <Picker
                            supportedOrientations={['portrait', 'landscape']}
                            placeholder="Language"
                            selectedValue={this.state.lang}
                            onValueChange={this._setLanguage}
                        >
                            <Item label={'Deutsch'} value={'de'} />
                            <Item label={'English'} value={'en'} />
                        </Picker>
                    </ListItem>
                </View>
                <View>
                    <TouchableOpacity>
                        <Text>Bestätigen</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Container>
    );
  }
}

0 个答案:

没有答案