score:2
by using width and height '100%' you can't get exactly what you wanted to, because the image will fill all the available space, i suggest debugging your ui using backgroundcolor or ctrl+d and 'toggle inspector' then check what exactly happens in your view. this is a snippet of code that responds to your need (right image 'what i need):
<view
style={{
height: 150,
width: 150,
position: 'relative',
overflow: 'hidden',
backgroundcolor:'red',
alignitems:'center'
}}>
<image
resizemode="cover"
source={{ uri: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
style={{
position: 'absolute',
bottom: 0,
width: '90%',
height: '90%',
}}
/>
</view>
score:0
if you wanna translate your image when you put option : resizemode="cover"
, you can translate by way :
translatex = size ( in reactjs ) <=>
<view style={{flex: 1,
position: 'relative',
width: width - 20,
height: height / 3,
borderradius: 10,
shadowcolor: "#000",
shadowoffset: { width: .5, height: .5 },
shadowopacity: .5,
shadowradius: 3,
elevation: 5,
margin: 10}}>
<view style={{width: 400,
height: "100%",
borderradius: 10,
overflow: 'hidden',
flex: 1 }}
>
<image
resizemethod="cover"
style={{ paddingtop: 500, width: 400, height: '100%' }}
source={{uri: "https://f39zpg.zdn.vn/7941473480683381577/74807d444750b50eec41.jpg" }}
/>
</view>
</view >
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
= size (in css reactnative ). it worked me.
hope it will help to you !
"anh da đen"
Source: stackoverflow.com
Related Query
- React Native Image resizeMode: cover with bottom positioning
- React Native Image Not Working with specific URL
- React Native - Share local image with showShareActionSheetWithOptions
- React JS: Image size flickers on reload with object-fit: cover CSS property
- Show image from Firebase with React Native
- React Native Mask Image with another image
- Header background image disappear and fade away on scroll with bottom gradient in React app
- Image require() with a dynamic String in react native
- Replace some part of string with image component in react native
- Image resizing in React Native
- Hiding the status bar with React Native
- Detecting when user scrolls to bottom of div with React js
- New React Native project with old version of react native
- GET with query string with Fetch in React Native
- Trouble requiring image module in React Native
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- Get dimensions of image with React
- React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
- React Native - iOS - Local image invisible (works on android)
- How to create two columns with space beetwen in react native - flatList
- Building hybrid React apps for iOS and Android with native performance
- React Native Webview with openlayers
- React Native Debugging with Async/Await
- Proper way of using WebSockets with React Native
- Search Filter with React Native on FlatList
- React Native image upload
- How should the new context api work with React Native navigator?
- In React Native how can I test my components with Shallow Rendering?
- FontFamily React Native App overwrite with device custom font (Samsung & Oppo)
- How to debug with breakpoints in React Native
More Query from same tag
- Two ReactJS apps in single page
- Is there anyway to push javascript console logs to sentry
- Redux state doesn't update with action dispatch
- How to ignore search queries when pushing a new path?
- Problem when subfoldering React app + Angular app using Ingress Gateway
- React error [Expected an assignment or function call and instead saw an expression]
- Stateless component in React and "Props is defined but never used" ESLint error
- Relay fragments with React experimental: Property '" $fragmentRefs"' is missing
- SyntaxError - node_modules/react-native/Libraries/polyfills/error-guard.js: Missing semicolon. (14:4) on running jest in react native library
- Why doesn't react-router-redux work when using a custom basename?
- React.js transitions not working for "fade out"
- Field 'name' on type 'RemoteDependencyData' is too long
- How to update react datatable ( react-data-table-component library) based on button click
- How to keep dropdowns and buttons fixed while panning on a google-map
- React JS - hide a text of the parent component by clicking on the NavLink
- Material UI Stepper using custom icon deletes the step number. how to add the number or random text back with a custom icon?
- "Rendered more hooks than during the previous render" error when the initial value for the hook is a query result from a database
- Unable to disable ESLint rule react/no-unsafe
- Typing Redux toolkit's store in TypeScript
- React Bootstrap Card Won't Show
- How to write JavaScript code inside html attributes in React JS
- How to know when children finished parent function call?
- How do you allow users to select multiple options in a select tag in React?
- Uncaught Error: _registerComponent(...): Target container is not a DOM element
- Passing props from parent component to child components
- React - display answer as a list
- React fetch failed: "TypeError: Failed to fetch" even though the API returns data
- Fetch API can't load '.php' local file - React JS + PHP
- Nested routes inside react component
- Typescript react: Type inference is not working for callback refs