Question

我试图得到这个结果：

到目前为止，我实现了这个目标：

如您所见，带有文字的圆圈未正确显示。

这是我的代码：

<div class="row">
  <%= if params[:plan] == '1' %>
      Contributor
  <%= elsif params[:plan] == '2' %>
      Elite Contributor
  <%= elsif params[:plan] == '3' %>
      Technician
  <%= elsif params[:plan] == '4' %>
      Elite Technician
  <%= elsif params[:plan] == '5' %>
      Center
  <%= elsif params[:plan] == '6' %>
      Elite Center
  <%= elsif params[:plan] == '7' %>
      Affair
  <%= elsif params[:plan] == '8' %>
      Elite Affair
<% end %>

  <div class="col-md-4 col-md-offset-4">
    <div class="well">
      <div class="page-header text-center">
        <h2>JOIN</h2>
        <li role="separator" class="divider"></li>
      </div>

      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        <%= devise_error_messages! %>

        <div class="field form-group">
          <%= f.label :email %><br />
          <%= f.email_field :email, autofocus: true, class: 'form-control' %>
        </div>

        <div class="field form-group">
          <%= f.label :password %>
          <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %><br />
          <%= f.password_field :password, autocomplete: "off", class:'form-control' %>
        </div>

        <div class="field form-group">
          <%= f.label :password_confirmation %><br />
          <%= f.password_field :password_confirmation, autocomplete: "off", class:'form-control' %>
        </div>

        <br>

        <div class="actions text-center">
          <%= f.submit " JOIN ", class:'btn btn-lg btn-success' %>
        </div>
      <% end %>

      <div class="text-right">
        <%= render "devise/shared/links" %>
      </div>

    </div>
  </div>
</div>

溢出属性似乎没有做太多，如果我删除它，结果保持不变。

谢谢你的帮助。

Answer 1

所以这是解决方案，感谢这段代码：https://rnplay.org/apps/rpv82A

<View style={{flex:1, height:40, width:40, justifyContent:'center', alignItems:'center'}}>
          <Image style={{width:40}} source={require('./assets/icon-caddy.png')}/>
              <View style={{backgroundColor:'#88b148', borderRadius:50,position:'absolute',flex:1, justifyContent:'center',alignItems:'center', top: 0, left: 50}}>
                <Text style={{ color:'#fff', fontSize:8, margin:3 }}>20</Text>
              </View>
      </View>

ReactNative：文本溢出图像

1 个答案: