react-native - 如何在@shoutem/ui 中使用文本输入创建视图

Question

我尝试使用@shoutem/ui，我想创建这样的视图：

但我不能这样做，用我的代码，我总是得到这样的图片：

这是我的代码：

 <View styleName="horizontal space-between h-center" >
          <Button>
            <Icon name="like" />
          </Button>
          <TextInput
            placeholder={'Enter comment..'}
          />
          <Button>
            <Icon name="activity" />
          </Button>
        </View>

请给我一些解决方案可以解决它！

Answer 1

有一个例子（我的）：

ScrollView contentContainerStyle={{justifyContent: 'center'}}
    style={[Styles.container, {height: this.state.visibleHeight}]} keyboardShouldPersistTaps='always'>
    <Image source={Images.logo} style={[Styles.topLogo, this.state.topLogo]} />
    <View style={Styles.form}>
      <View style={Styles.row}>
        <Text style={Styles.rowLabel}>Username</Text>
        <TextInput
          ref='username'
          style={textInputStyle}
          value={username}
          editable={editable}
          keyboardType='default'
          returnKeyType='next'
          autoCapitalize='none'
          autoCorrect={false}
          onChangeText={this.handleChangeUsername}
          underlineColorAndroid='transparent'
          onSubmitEditing={() => this.refs.password.focus()}
          placeholder='Utilisateur' />
      </View>

      <View style={Styles.row}>
        <Text style={Styles.rowLabel}>Password</Text>
        <TextInput
          ref='password'
          style={textInputStyle}
          value={password}
          editable={editable}
          keyboardType='default'
          returnKeyType='go'
          autoCapitalize='none'
          autoCorrect={false}
          secureTextEntry
          onChangeText={this.handleChangePassword}
          underlineColorAndroid='transparent'
          onSubmitEditing={this.handlePressLogin}
          placeholder='psswd' />
      </View>

      <View style={[Styles.loginRow]}>
        <TouchableOpacity style={Styles.loginButtonWrapper}
          onPress={this.handlePressLogin.bind(this)}>
          <View style={Styles.loginButton}>
            <Text style={Styles.loginText}>Connect</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity style={Styles.loginButtonWrapper} onPress={this.goBack.bind(this)}>
          <View style={Styles.loginButton}>
            <Text style={Styles.loginText}>Back</Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>