在滚动视图的页面底部添加视图

Question

我在所有视图上放置了一个滚动视图，以防止键盘移动页面元素。

所以这是有滚动视图和没有滚动视图的结果：

Without Scrollview

With Scrollview

这项工作，但现在我有一个新问题。我的文本“还没有帐户？注册”应该在屏幕底部。

我有什么：

I have

我想要什么：

I want

我会知道如何将视图放在滚动视图的底部。

我的这个视图的 css ：

signupTextCont: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row',

},

这一行 :alignItems: 'flex-end'

通常，假设将文本放在屏幕底部，但因为我有一个滚动视图，所以他不会在底部。我应该怎么做？

渲染：

     <ScrollView style={styles.main_container}>
     <View  style={styles.container} >
       <Text>{'\n'}</Text>
       <View style={styles.container}>
           <TextInput style={styles.inputBox}
           onChangeText={(email) => this.setState({email})}
           underlineColorAndroid='rgba(0,0,0,0)'
           placeholder="Email"
           placeholderTextColor = "#002f6c"
           selectionColor="#fff"
           keyboardType="email-address"
           onSubmitEditing={()=> this.password.focus()}/>

           <TextInput style={styles.inputBox}
           onChangeText={(password) => this.setState({password})}
           underlineColorAndroid='rgba(0,0,0,0)'
           placeholder="Password"
           secureTextEntry={true}
           placeholderTextColor = "#002f6c"
           ref={(input) => this.password = input}
           />

           <TouchableOpacity style={styles.button}>
               <Text style={styles.buttonText} onPress={this.saveData}>{this.props.type}Login</Text>
           </TouchableOpacity>
       </View>
       <View
        style={{
          borderBottomColor: 'gray',
          borderBottomWidth: 1,
          alignSelf:'stretch',
          width: Dimensions.get('window').width-30,
          backgroundColor: 'rgba(164, 164, 164, 0.44)',
          marginBottom:10,
          marginLeft:10,
          marginRight:10
        }}

      />
      <Text
      style={{
        marginBottom:10
      }}
      >or</Text>
       <LoginButton

       publishPermissions={["publish_actions"]}
       readPermissions={['public_profile', 'email', 'user_friends']}
         onLoginFinished={
           (error, result) => {
             if (error) {
               console.log("login has error: " + result.error);
             } else if (result.isCancelled) {
               console.log("login is cancelled.");
             } else {

               AccessToken.getCurrentAccessToken().then((data) => {
                  // Permet d'appeler la fonction _responseInfoCallback pour récupérer les informations demandé à l'api de facebook.
                 const infoRequest = new GraphRequest(
                     '/me?fields=email,name,picture',
                     null,
                     this._responseInfoCallback
                   );
                   // Start the graph request.
                   new GraphRequestManager().addRequest(infoRequest).start();
                 }
               )
             }
           }
         }
         onLogoutFinished={() => console.log("logout.")}/>
       <View style={styles.signupTextCont}>
           <TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
       </View>
     </View >
    </ScrollView>

 );

} }

CSS：

const styles = StyleSheet.create({
main_container: {
flexGrow:1,
backgroundColor: 'white',

}, 容器： { 弹性：1， justifyContent: '中心', alignItems: '居中'

},
signupTextCont: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'flex-end',
  paddingVertical: 16,
  flexDirection: 'row',

},
signupText: {
  color: '#12799f',
  fontSize:16,
},
signupButton: {
    color: '#12799f',
    fontSize:16,
    fontWeight: '500',
},
inputBox: {
    width: 300,
    backgroundColor: '#eeeeee',
    borderRadius: 25,
    paddingHorizontal: 16,
    fontSize: 16,
    color: '#002f6c',
    marginVertical: 10
},
button: {
    width: 300,
    backgroundColor: '#4f83cc',
    borderRadius: 25,
    marginVertical: 10,
    paddingVertical: 12
},
buttonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#ffffff',
    textAlign: 'center'
}

});

有人有解决方案吗？谢谢！

Answer 1

您可以将除注册之外的其他代码包装到 View 中，并将 'space-between' 设置为容器样式。

<View style={styles.container}>
  <View>
    <Text>{'\n'}</Text>
    ...
    onLogoutFinished={() => console.log("logout.")}/>
  </View>
  <View style={styles.signupTextCont}>
     <TouchableOpacity onPress={this._signup}><Text style={styles.signupButton}>Dont have an account yet? Signup </Text></TouchableOpacity>
  </View>
</View>

container: {
  justifyContent: 'space-between'
}
(you can check 'space-around or 'space-evenly' and you can use anyone if you want.)