は、アンドロイドデバイスで問題shoutemを修正する方法です

Question

私は私のプロジェクトでshoutem/uiを使用しようとしました！私はそれがiOS版ではうまく機能し、ログイン/登録のための1つのコンポーネントを作成しますが、アンドロイドで私はそこに下図のような問題を持って、ここに私のコードは次のとおりです。

<Screen 
 
       style={{ 
 
        backgroundColor: '#2ecc71' 
 
       }} 
 
      > 
 
       <StatusBar 
 
        barStyle="light-content" 
 
       /> 
 
       <NavigationBar 
 
        styleName="no-border" 
 
        style={{ 
 
         container: { 
 
          position: 'relative', 
 
          width: Dimensions.get('window').width, 
 
          backgroundColor: '#2ecc71' 
 
         } 
 
        }} 
 
       /> 
 
       <View 
 
        style={{ 
 
         alignItems: 'center', 
 
         flexGrow: 1, 
 
         justifyContent: 'center', 
 
        }} 
 
       > 
 
        <Divider /> 
 
        <Image 
 
         styleName="medium-square" 
 
         source={require('../images/logo.png')} 
 
        /> 
 
        {this.renderSpinner()} 
 
        <Divider /> 
 
        <TextInput 
 
         placeholder={'Username or email'} 
 
         editable={!this.state.statusButton} 
 
         onChangeText={(text) => this.setState({ email: text })} 
 
         keyboardType="email-address" 
 
         autoCapitalize="none" 
 
         autoCorrect={false} 
 
        /> 
 
        <Divider styleName="line" /> 
 
        <TextInput 
 
         editable={!this.state.statusButton} 
 
         onChangeText={(text) => this.setState({ password: text })} 
 
         placeholder={'Password'} 
 
         secureTextEntry 
 
         autoCapitalize="none" 
 
        /> 
 
        <Divider /> 
 
        <View styleName="horizontal flexible"> 
 
         <Button 
 
          disabled={this.state.statusButton} 
 
          styleName="full-width confirmation" 
 
          onPress={this.onLoginPressed.bind(this)} 
 
         > 
 
          <Text>LOGIN</Text> 
 
         </Button> 
 
         <Button 
 
          disabled={this.state.statusButton} 
 
          styleName="full-width confirmation" 
 
          onPress={this.goToRegister.bind(this)} 
 
         > 
 
          <Text>REGISTER</Text> 
 
         </Button> 
 
        </View> 
 
       </View> 
 
      </Screen> 
 
    

、ここでは、iOSの結果です/アンドロイド：私は間違っていない場合は

Answer 1

は、あなたがあなたのTextInputコンポーネントの幅を指定することはありません。

<TextInput 
    placeholder={'Username or email'} 
    editable={!this.state.statusButton} 
    onChangeText={(text) => this.setState({ email: text })} 
    keyboardType="email-address" 
    autoCapitalize="none" 
    autoCorrect={false} 
/> 

<TextInput 
    editable={!this.state.statusButton} 
    onChangeText={(text) => this.setState({ password: text })} 
    placeholder={'Password'} 
    secureTextEntry 
    autoCapitalize="none" 
/> 

それはTextInputのが最大画面幅に伸ばしますiOSのデフォルトでのように見えますが、あなたがあなた自身のスクリーンショットで見ることができるようにAndroid上でそれが縮小します。

幅を追加してください。

<TextInput 
    placeholder={'Username or email'} 
    editable={!this.state.statusButton} 
    onChangeText={(text) => this.setState({ email: text })} 
    keyboardType="email-address" 
    autoCapitalize="none" 
    autoCorrect={false} 

    style={{ width: 100% }} 
/>