devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: update react-native.md

Browse Source
This commit is contained in:
jaywcjlove 2022-11-29 11:34:05 +08:00
parent 396037f90a
commit cb64b52cda
1 changed files with 261 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

338
docs/react-native.md
View File

@ -22,7 +22,7 @@ $ ruby --version
# ruby 2.7.5 # ruby 2.7.5
``` ```
<red>注意:</red> macOS 12.5.1 附带了 Ruby 2.6.8，这不是 React Native 所要求的，React Native 70+ 需要 Ruby 2.7.5，可以使用下面工具切换版本： <red>注意:</red> macOS 12.5.1 附带了 Ruby <pur>**2.6.8**</pur>，这不是 React Native 所要求的，React Native 70+ 需要 Ruby <yel>**2.7.5**</yel>，可以使用下面工具切换版本：
- [rbenv](https://github.com/rbenv/rbenv) - [rbenv](https://github.com/rbenv/rbenv)
- [RVM](https://rvm.io/) - [RVM](https://rvm.io/)
@ -162,19 +162,10 @@ export default function ViewExample() {
return ( return (
<View <View
style={{ style={{
flexDirection: "row", backgroundColor: "red",
height: 100, flex: 0.5
padding: 20
}} }}
> />
<View style={{
backgroundColor: "blue", flex: 0.3
}} />
<View style={{
backgroundColor: "red", flex: 0.5
}} />
<Text>Hello World!</Text>
</View>
); );
}; };
``` ```
@ -185,9 +176,10 @@ export default function ViewExample() {
```jsx ```jsx
import React from 'react'; import React from 'react';
import { Text, StyleSheet } from 'react-native'; import { Text } from 'react-native';
import { StyleSheet } from 'react-native';
export default function BoldAndBeautiful() { export default function BoldBeautiful() {
return ( return (
<Text style={styles.baseText}> <Text style={styles.baseText}>
我是粗体 我是粗体
@ -197,7 +189,6 @@ export default function BoldAndBeautiful() {
</Text> </Text>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
baseText: { fontWeight: 'bold' }, baseText: { fontWeight: 'bold' },
innerText: { color: 'red' } innerText: { color: 'red' }
@ -212,25 +203,21 @@ const styles = StyleSheet.create({
import React from "react"; import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native"; import { SafeAreaView, StyleSheet, TextInput } from "react-native";
const UselessTextInput = () => { export default function UseTextInput() {
const [text, onChangeText] = React.useState("Useless Text"); const [
text, onChangeText
] = React.useState("Useless Text");
return ( return (
<SafeAreaView> <SafeAreaView>
<TextInput <TextInput
style={styles.input}
onChangeText={onChangeText} onChangeText={onChangeText}
value={text} value={text}
/> />
</SafeAreaView> </SafeAreaView>
); );
}; };
const styles = StyleSheet.create({
input: { height: 40, padding: 10, },
});
export default UselessTextInput;
``` ```
<!--rehype:className=wrap-text-->
用于通过键盘将文本输入应用程序的组件 用于通过键盘将文本输入应用程序的组件
@ -324,7 +311,9 @@ import { StyleSheet, Text, View } from "react-native";
export const App = () => ( export const App = () => (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.title}>React Native</Text> <Text style={styles.title}>
React Native
</Text>
</View> </View>
); );
@ -340,6 +329,7 @@ const styles = StyleSheet.create({
} }
}); });
``` ```
<!--rehype:className=wrap-text-->
提供类似于 CSS 样式表的抽象层 提供类似于 CSS 样式表的抽象层
@ -350,6 +340,8 @@ const styles = StyleSheet.create({
### Button ### Button
```jsx ```jsx
import { Button } from "react-native";
<Button <Button
onPress={onPressLearnMore} onPress={onPressLearnMore}
title="Learn More" title="Learn More"
@ -363,6 +355,8 @@ const styles = StyleSheet.create({
### Switch ### Switch
```jsx ```jsx
import { Switch } from "react-native";
<Switch <Switch
trackColor={{ false: "#767577", true: "#81b0ff" }} trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"} thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
@ -646,7 +640,10 @@ export default App;
```jsx ```jsx
import React from "react"; import React from "react";
import { Button, PermissionsAndroid, SafeAreaView, StatusBar, StyleSheet, Text, View } from "react-native"; import {
Button, PermissionsAndroid,
SafeAreaView, StatusBar, StyleSheet, Text, View
} from "react-native";
const requestCameraPermission = async () => { const requestCameraPermission = async () => {
try { try {
@ -675,7 +672,10 @@ const requestCameraPermission = async () => {
const App = () => ( const App = () => (
<View style={styles.container}> <View style={styles.container}>
<Text style={styles.item}>Try permissions</Text> <Text style={styles.item}>Try permissions</Text>
<Button title="request permissions" onPress={requestCameraPermission} /> <Button
title="request permissions"
onPress={requestCameraPermission}
/>
</View> </View>
); );
@ -704,11 +704,13 @@ export default App;
```jsx ```jsx
import React from "react"; import React from "react";
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from "react-native"; import {
View, StyleSheet, ToastAndroid, Button, StatusBar
} from "react-native";
const App = () => { const App = () => {
const showToast = () => { const showToast = () => {
ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT); ToastAndroid.show("一只皮卡丘出现在附近!", ToastAndroid.SHORT);
}; };
const showToastWithGravity = () => { const showToastWithGravity = () => {
@ -896,35 +898,34 @@ export default App;
```jsx ```jsx
import React, { useRef } from "react"; import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView } from "react-native"; import {
Animated, Text, View, StyleSheet, Button, SafeAreaView
} from "react-native";
const App = () => { const App = () => {
// fadeAnim will be used as the value for opacity. Initial Value: 0 // fadeAnim 将用作不透明度的值。 初始值：0
const fadeAnim = useRef(new Animated.Value(0)).current; const fadeAnim = useRef(new Animated.Value(0)).current;
const fadeIn = () => { const fadeIn = () => {
// Will change fadeAnim value to 1 in 5 seconds // 将在 5 秒内将 fadeAnim 值更改为 1
Animated.timing(fadeAnim, { Animated.timing(fadeAnim, {
toValue: 1, toValue: 1,
duration: 5000 duration: 5000
}).start(); }).start();
}; };
const fadeOut = () => { const fadeOut = () => {
// Will change fadeAnim value to 0 in 3 seconds // 将在 3 秒内将 fadeAnim 值更改为 0
Animated.timing(fadeAnim, { Animated.timing(fadeAnim, {
toValue: 0, toValue: 0,
duration: 3000 duration: 3000
}).start(); }).start();
}; };
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<Animated.View <Animated.View
style={[ style={[
styles.fadingContainer, styles.fadingContainer,
{ {
// Bind opacity to animated value // 将不透明度绑定到动画值
opacity: fadeAnim opacity: fadeAnim
} }
]} ]}
@ -932,8 +933,8 @@ const App = () => {
<Text style={styles.fadingText}>Fading View!</Text> <Text style={styles.fadingText}>Fading View!</Text>
</Animated.View> </Animated.View>
<View style={styles.buttonRow}> <View style={styles.buttonRow}>
<Button title="Fade In View" onPress={fadeIn} /> <Button title="淡入淡出" onPress={fadeIn} />
<Button title="Fade Out View" onPress={fadeOut} /> <Button title="淡出视图" onPress={fadeOut} />
</View> </View>
</SafeAreaView> </SafeAreaView>
); );
@ -949,9 +950,7 @@ const styles = StyleSheet.create({
padding: 20, padding: 20,
backgroundColor: "powderblue" backgroundColor: "powderblue"
}, },
fadingText: { fadingText: { fontSize: 28 },
fontSize: 28
},
buttonRow: { buttonRow: {
flexBasis: 100, flexBasis: 100,
justifyContent: "space-evenly", justifyContent: "space-evenly",
@ -979,7 +978,11 @@ const windowHeight = Dimensions.get('window').height;
```jsx ```jsx
import React from 'react'; import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard } from 'react-native'; import {
View, KeyboardAvoidingView, TextInput,
StyleSheet, Text, Platform,
TouchableWithoutFeedback, Button, Keyboard
} from 'react-native';
const KeyboardAvoidingComponent = () => { const KeyboardAvoidingComponent = () => {
return ( return (
@ -990,7 +993,7 @@ const KeyboardAvoidingComponent = () => {
<TouchableWithoutFeedback onPress={Keyboard.dismiss}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}> <View style={styles.inner}>
<Text style={styles.header}>Header</Text> <Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} /> <TextInput placeholder="用户名" style={styles.textInput} />
<View style={styles.btnContainer}> <View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} /> <Button title="Submit" onPress={() => null} />
</View> </View>
@ -1001,18 +1004,13 @@ const KeyboardAvoidingComponent = () => {
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: { flex: 1 },
flex: 1
},
inner: { inner: {
padding: 24, padding: 24,
flex: 1, flex: 1,
justifyContent: "space-around" justifyContent: "space-around"
}, },
header: { header: { fontSize: 36, marginBottom: 48 },
fontSize: 36,
marginBottom: 48
},
textInput: { textInput: {
height: 40, height: 40,
borderColor: "#000000", borderColor: "#000000",
@ -1034,43 +1032,47 @@ export default KeyboardAvoidingComponent;
```jsx ```jsx
import React, { useCallback } from "react"; import React, { useCallback } from "react";
import { Alert, Button, Linking, StyleSheet, View } from "react-native"; import {
Alert, Button, Linking, StyleSheet, View
} from "react-native";
const supportedURL = "https://google.com"; const supportedURL = "https://google.com";
const unsupportedURL = "slack://open?team=123456"; const unsupportedURL = "slack://open?team=123456";
const OpenURLButton = ({ url, children }) => { const OpenURLButton = ({ url, children }) => {
const handlePress = useCallback(async () => { const handlePress = useCallback(async () => {
// Checking if the link is supported for links with custom URL scheme. // 检查具有自定义 URL 方案的链接是否支持该链接。
const supported = await Linking.canOpenURL(url); const supported = await Linking.canOpenURL(url);
if (supported) { if (supported) {
// Opening the link with some app, if the URL scheme is "http" the web link should be opened // 打开某些应用程序的链接，如果 URL 方案是“http”，则应打开 Web 链接
// by some browser in the mobile // 通过手机中的某些浏览器
await Linking.openURL(url); await Linking.openURL(url);
} else { } else {
Alert.alert(`Don't know how to open this URL: ${url}`); Alert.alert(`不知道如何打开这个网址： ${url}`);
} }
}, [url]); }, [url]);
return <Button title={children} onPress={handlePress} />; return <Button title={children} onPress={handlePress} />;
}; };
const App = () => { export default function App() {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<OpenURLButton url={supportedURL}>打开支持的 URL</OpenURLButton> <OpenURLButton url={supportedURL}>
<OpenURLButton url={unsupportedURL}>打开不支持的 URL</OpenURLButton> 打开支持的 URL
</OpenURLButton>
<OpenURLButton url={unsupportedURL}>
打开不支持的 URL
</OpenURLButton>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center" }, container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
}); });
export default App;
``` ```
提供一个通用接口来与传入和传出应用程序链接进行交互 提供一个通用接口来与传入和传出应用程序链接进行交互
@ -1080,7 +1082,9 @@ export default App;
```jsx ```jsx
import React, { useState } from "react"; import React, { useState } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native"; import {
Alert, Modal, StyleSheet, Text, Pressable, View
} from "react-native";
const App = () => { const App = () => {
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
@ -1091,7 +1095,7 @@ const App = () => {
transparent={true} transparent={true}
visible={modalVisible} visible={modalVisible}
onRequestClose={() => { onRequestClose={() => {
Alert.alert("Modal has been closed."); Alert.alert("模态已关闭");
setModalVisible(!modalVisible); setModalVisible(!modalVisible);
}} }}
> >
@ -1182,20 +1186,18 @@ var image = getImage({
```jsx ```jsx
import React from 'react'; import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native'; import {
RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text
} from 'react-native';
const wait = (timeout) => { const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout)); return new Promise(resolve => setTimeout(resolve, timeout));
} }
export default function App() {
const App = () => {
const [refreshing, setRefreshing] = React.useState(false); const [refreshing, setRefreshing] = React.useState(false);
const onRefresh = React.useCallback(() => { const onRefresh = React.useCallback(() => {
setRefreshing(true); setRefreshing(true);
wait(2000).then(() => setRefreshing(false)); wait(2000).then(() => setRefreshing(false));
}, []); }, []);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<ScrollView <ScrollView
@ -1224,8 +1226,6 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
}); });
export default App;
``` ```
该组件在 ScrollView 内部使用，以添加下拉刷新功能 该组件在 ScrollView 内部使用，以添加下拉刷新功能
@ -1452,3 +1452,187 @@ flexDirection 样式属性确定子元素的布局方向和顺序，可以是`ro
``` ```
默认所有尺寸都是<pur>**无单位**</pur>的，并且表示与密度无关的像素 默认所有尺寸都是<pur>**无单位**</pur>的，并且表示与密度无关的像素
Props
---
### View Style Props
<!--rehype:wrap-class=row-span-3-->
```jsx
import React from "react";
import { View, StyleSheet } from "react-native";
export default function ViewStyle() {
return (
<View style={styles.container}>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "space-between",
backgroundColor: "#fff",
},
});
```
<!--rehype:className=wrap-text-->
---
:- | --
:- | --
`backfaceVisibility` | [#](https://reactnative.dev/docs/view-style-props#backfacevisibility)
`backgroundColor` | [#](https://reactnative.dev/docs/view-style-props#backgroundcolor)
`borderBottomColor` | [#](https://reactnative.dev/docs/view-style-props#borderbottomcolor)
`borderBottomEndRadius` | [#](https://reactnative.dev/docs/view-style-props#borderbottomendradius)
`borderBottomLeftRadius` | [#](https://reactnative.dev/docs/view-style-props#borderbottomleftradius)
`borderBottomRightRadius` | [#](https://reactnative.dev/docs/view-style-props#borderbottomrightradius)
`borderBottomStartRadius` | [#](https://reactnative.dev/docs/view-style-props#borderbottomstartradius)
`borderBottomWidth` | [#](https://reactnative.dev/docs/view-style-props#borderbottomwidth)
`borderColor` | [#](https://reactnative.dev/docs/view-style-props#bordercolor)
`borderEndColor` | [#](https://reactnative.dev/docs/view-style-props#borderendcolor)
`borderLeftColor` | [#](https://reactnative.dev/docs/view-style-props#borderleftcolor)
`borderLeftWidth` | [#](https://reactnative.dev/docs/view-style-props#borderleftwidth)
`borderRadius` | [#](https://reactnative.dev/docs/view-style-props#borderradius)
`borderRightColor` | [#](https://reactnative.dev/docs/view-style-props#borderrightcolor)
`borderRightWidth` | [#](https://reactnative.dev/docs/view-style-props#borderrightwidth)
`borderStartColor` | [#](https://reactnative.dev/docs/view-style-props#borderstartcolor)
`borderStyle` | [#](https://reactnative.dev/docs/view-style-props#borderstyle)
`borderTopColor` | [#](https://reactnative.dev/docs/view-style-props#bordertopcolor)
`borderTopEndRadius` | [#](https://reactnative.dev/docs/view-style-props#bordertopendradius)
`borderTopLeftRadius` | [#](https://reactnative.dev/docs/view-style-props#bordertopleftradius)
`borderTopRightRadius` | [#](https://reactnative.dev/docs/view-style-props#bordertoprightradius)
`borderTopStartRadius` | [#](https://reactnative.dev/docs/view-style-props#bordertopstartradius)
`borderTopWidth` | [#](https://reactnative.dev/docs/view-style-props#bordertopwidth)
`borderWidth` | [#](https://reactnative.dev/docs/view-style-props#borderwidth)
`elevation` _Android_ | [#](https://reactnative.dev/docs/view-style-props#elevation-android)
`opacity` | [#](https://reactnative.dev/docs/view-style-props#opacity)
### Text Style Props
<!--rehype:wrap-class=row-span-2-->
:- | --
:- | --
`color` | [#](https://reactnative.dev/docs/text-style-props#color)
`fontFamily` | [#](https://reactnative.dev/docs/text-style-props#fontfamily)
`fontSize` | [#](https://reactnative.dev/docs/text-style-props#fontsize)
`fontStyle` | [#](https://reactnative.dev/docs/text-style-props#fontstyle)
`fontWeight` | [#](https://reactnative.dev/docs/text-style-props#fontweight)
`includeFontPadding` _Android_ | [#](https://reactnative.dev/docs/text-style-props#includefontpadding-android)
`fontVariant` | [#](https://reactnative.dev/docs/text-style-props#fontvariant)
`letterSpacing` | [#](https://reactnative.dev/docs/text-style-props#letterspacing)
`lineHeight` | [#](https://reactnative.dev/docs/text-style-props#lineheight)
`textAlign` | [#](https://reactnative.dev/docs/text-style-props#textalign)
`textAlignVertical` _Android_ | [#](https://reactnative.dev/docs/text-style-props#textalignvertical-android)
`textDecorationColor` _iOS_ | [#](https://reactnative.dev/docs/text-style-props#textdecorationcolor-ios)
`textDecorationLine` | [#](https://reactnative.dev/docs/text-style-props#textdecorationline)
`textDecorationStyle` _iOS_ | [#](https://reactnative.dev/docs/text-style-props#textdecorationstyle-ios)
`textShadowColor` | [#](https://reactnative.dev/docs/text-style-props#textshadowcolor)
`textShadowOffset` | [#](https://reactnative.dev/docs/text-style-props#textshadowoffset)
`textShadowRadius` | [#](https://reactnative.dev/docs/text-style-props#textshadowradius)
`textTransform` | [#](https://reactnative.dev/docs/text-style-props#texttransform)
`writingDirection` _iOS_ | [#](https://reactnative.dev/docs/text-style-props#writingdirection-ios)
### Shadow Props
:- | --
:- | --
`shadowColor` | [#](https://reactnative.dev/docs/shadow-props#shadowcolor)
`shadowOffset` _iOS_ | [#](https://reactnative.dev/docs/shadow-props#shadowoffset-ios)
`shadowOpacity` _iOS_ | [#](https://reactnative.dev/docs/shadow-props#shadowopacity-ios)
`shadowRadius` _iOS_ | [#](https://reactnative.dev/docs/shadow-props#shadowradius-ios)
### Layout Props
<!--rehype:wrap-class=row-span-3-->
:- | --
:- | --
`alignContent` | [#](https://reactnative.dev/docs/layout-props#aligncontent)
`alignItems` | [#](https://reactnative.dev/docs/layout-props#alignitems)
`alignSelf` | [#](https://reactnative.dev/docs/layout-props#alignself)
`aspectRatio` | [#](https://reactnative.dev/docs/layout-props#aspectratio)
`borderBottomWidth` | [#](https://reactnative.dev/docs/layout-props#borderbottomwidth)
`borderEndWidth` | [#](https://reactnative.dev/docs/layout-props#borderendwidth)
`borderLeftWidth` | [#](https://reactnative.dev/docs/layout-props#borderleftwidth)
`borderRightWidth` | [#](https://reactnative.dev/docs/layout-props#borderrightwidth)
`borderStartWidth` | [#](https://reactnative.dev/docs/layout-props#borderstartwidth)
`borderTopWidth` | [#](https://reactnative.dev/docs/layout-props#bordertopwidth)
`borderWidth` | [#](https://reactnative.dev/docs/layout-props#borderwidth)
`bottom` | [#](https://reactnative.dev/docs/layout-props#bottom)
`direction` | [#](https://reactnative.dev/docs/layout-props#direction)
`display` | [#](https://reactnative.dev/docs/layout-props#display)
`end` | [#](https://reactnative.dev/docs/layout-props#end)
`flex` | [#](https://reactnative.dev/docs/layout-props#flex)
`flexBasis` | [#](https://reactnative.dev/docs/layout-props#flexbasis)
`flexDirection` | [#](https://reactnative.dev/docs/layout-props#flexdirection)
`flexGrow` | [#](https://reactnative.dev/docs/layout-props#flexgrow)
`flexShrink` | [#](https://reactnative.dev/docs/layout-props#flexshrink)
`flexWrap` | [#](https://reactnative.dev/docs/layout-props#flexwrap)
`height` | [#](https://reactnative.dev/docs/layout-props#height)
`justifyContent` | [#](https://reactnative.dev/docs/layout-props#justifycontent)
`left` | [#](https://reactnative.dev/docs/layout-props#left)
`margin` | [#](https://reactnative.dev/docs/layout-props#margin)
`marginBottom` | [#](https://reactnative.dev/docs/layout-props#marginbottom)
`marginEnd` | [#](https://reactnative.dev/docs/layout-props#marginend)
`marginHorizontal` | [#](https://reactnative.dev/docs/layout-props#marginhorizontal)
`marginLeft` | [#](https://reactnative.dev/docs/layout-props#marginleft)
`marginRight` | [#](https://reactnative.dev/docs/layout-props#marginright)
`marginStart` | [#](https://reactnative.dev/docs/layout-props#marginstart)
`marginTop` | [#](https://reactnative.dev/docs/layout-props#margintop)
`marginVertical` | [#](https://reactnative.dev/docs/layout-props#marginvertical)
`maxHeight` | [#](https://reactnative.dev/docs/layout-props#maxheight)
`maxWidth` | [#](https://reactnative.dev/docs/layout-props#maxwidth)
`minHeight` | [#](https://reactnative.dev/docs/layout-props#minheight)
`minWidth` | [#](https://reactnative.dev/docs/layout-props#minwidth)
`overflow` | [#](https://reactnative.dev/docs/layout-props#overflow)
`padding` | [#](https://reactnative.dev/docs/layout-props#padding)
`paddingBottom` | [#](https://reactnative.dev/docs/layout-props#paddingbottom)
`paddingEnd` | [#](https://reactnative.dev/docs/layout-props#paddingend)
`paddingHorizontal` | [#](https://reactnative.dev/docs/layout-props#paddinghorizontal)
`paddingLeft` | [#](https://reactnative.dev/docs/layout-props#paddingleft)
`paddingRight` | [#](https://reactnative.dev/docs/layout-props#paddingright)
`paddingStart` | [#](https://reactnative.dev/docs/layout-props#paddingstart)
`paddingTop` | [#](https://reactnative.dev/docs/layout-props#paddingtop)
`paddingVertical` | [#](https://reactnative.dev/docs/layout-props#paddingvertical)
`position` | [#](https://reactnative.dev/docs/layout-props#position)
`right` | [#](https://reactnative.dev/docs/layout-props#right)
`start` | [#](https://reactnative.dev/docs/layout-props#start)
`top` | [#](https://reactnative.dev/docs/layout-props#top)
`width` | [#](https://reactnative.dev/docs/layout-props#width)
`zIndex` | [#](https://reactnative.dev/docs/layout-props#zindex)
### Image Style Props
```jsx
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
```
<!--rehype:className=wrap-text-->
---
:- | --
:- | --
`backfaceVisibility` | [#](https://reactnative.dev/docs/image-style-props#backfacevisibility)
`backgroundColor` | [#](https://reactnative.dev/docs/image-style-props#backgroundcolor)
`borderBottomLeftRadius` | [#](https://reactnative.dev/docs/image-style-props#borderbottomleftradius)
`borderBottomRightRadius` | [#](https://reactnative.dev/docs/image-style-props#borderbottomrightradius)
`borderColor` | [#](https://reactnative.dev/docs/image-style-props#bordercolor)
`borderRadius` | [#](https://reactnative.dev/docs/image-style-props#borderradius)
`borderTopLeftRadius` | [#](https://reactnative.dev/docs/image-style-props#bordertopleftradius)
`borderTopRightRadius` | [#](https://reactnative.dev/docs/image-style-props#bordertoprightradius)
`borderWidth` | [#](https://reactnative.dev/docs/image-style-props#borderwidth)
`opacity` | [#](https://reactnative.dev/docs/image-style-props#opacity)
`overflow` | [#](https://reactnative.dev/docs/image-style-props#overflow)
`overlayColor` | [#](https://reactnative.dev/docs/image-style-props#overlaycolor-android)
`resizeMode` | [#](https://reactnative.dev/docs/image-style-props#resizemode)
`tintColor` | [#](https://reactnative.dev/docs/image-style-props#tintcolor)