当一个元素在native native中更改其大小时,如何使元素自动重定位?

时间:2017-10-04 17:40:17

标签: react-native flexbox

我目前有一条自动展开的多线textInput及其下方的按钮。问题是按钮的位置似乎是固定的,它不会向下移动而textInput只会在它上面运行。

Before

After

所有内容都包含在KeyboardAvoidingView

   <KeyboardAvoidingView 
        style={styles.container}
        behavior="padding">
        <StatusBar barStyle="light-content"/>

        <Text style={styles.title}>{this.state.form.prompt}</Text>

        <View style={styles.simpleContainer}>

          {this._renderForms()}

          <View style={[styles.forwardButtonLocation, styles.indentLeft]}>
            <ForwardButton
              onButtonPress={this._submitInfo}
            />
          </View>
        </View>

        <View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end',}}>
          <SkipButton
            onButtonPress={this._nextState}
          />
        </View>
      </KeyboardAvoidingView>

this._renderForms()为每个州呈现相应的表单,在这种情况下,它呈现:

<View style={styles.simpleContainer}>
        <AutoExpandingTextInput
          style={styles.textContentDark}
          placeholder={this.state.form.userInput}
          placeholderTextColor={DARK_THEME_CONTENT_COLOR_SECONDARY}
          onChangeText={(userInputValue) => 
            //TODO: Saving text to nested userInput is causing problem, temporarily save it to userInputValue
            //this.setState({form: {...this.state.form, userInput: text}}
            this.setState({userInputValue}
              )}
        />
      </View>

这是我的样式表:

const styles = StyleSheet.create({
  simpleContainer: {
    flex:1,
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: THEME_COLOR,
  },
  title: {
    flex: 1,
    marginTop: '15%',
    marginLeft: '3%',
    fontWeight: 'bold',
    fontSize: TITLE,
    color: DARK_THEME_CONTENT_COLOR_PRIMARY,
  },
  textContentDimmed: {
    fontSize: TITLE_SECONDARY,
    color: DARK_THEME_CONTENT_COLOR_SECONDARY,
  },
  textContentWhite: {
    fontSize: TITLE_SECONDARY,
    color: DARK_THEME_CONTENT_COLOR_PRIMARY,
  },
  textContentDark: {
    fontSize: TITLE_SECONDARY,
    color: LIGHT_THEME_CONTENT_COLOR_SECONDARY,
  },
  indentLeft: {
    marginLeft:'10%',
  },
  forwardButtonLocation: {
    flex: 1, 
    justifyContent: 'flex-start',
  },
  whiteLine: {
    width: '100%',
    height: 1,
    marginTop: 4,
    marginHorizontal: '6%',
    backgroundColor: DARK_THEME_CONTENT_COLOR_PRIMARY,
  },
});

当textInput的大小发生变化时,有没有办法自动重定位按钮?

0 个答案:

没有答案