样式

import { View, Text, StyleSheet } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  text: {
    fontSize: 18,
    color: '#333'
  }
});

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row' // 水平
  },
  column: {
    flexDirection: 'column' // 垂直（默认）
  }
});

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start', // 起点
    justifyContent: 'flex-end',   // 终点
    justifyContent: 'center',     // 居中
    justifyContent: 'space-between', // 两端对齐
    justifyContent: 'space-around',  // 分散对齐
    justifyContent: 'space-evenly'   // 均匀分布
  }
});

const styles = StyleSheet.create({
  container: {
    alignItems: 'flex-start', // 起点
    alignItems: 'flex-end',   // 终点
    alignItems: 'center',     // 居中
    alignItems: 'stretch'     // 拉伸（默认）
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1 // 占满剩余空间
  },
  box1: {
    flex: 1 // 占 1 份
  },
  box2: {
    flex: 2 // 占 2 份
  }
});

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    minWidth: 50,
    maxWidth: 200,
    minHeight: 50,
    maxHeight: 200
  }
});

const styles = StyleSheet.create({
  box: {
    margin: 10,
    marginTop: 10,
    marginRight: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginHorizontal: 10,
    marginVertical: 10,
    
    padding: 10,
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingHorizontal: 10,
    paddingVertical: 10
  }
});

const styles = StyleSheet.create({
  box: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderLeftWidth: 1,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8
  }
});

const styles = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  relative: {
    position: 'relative',
    top: 10,
    left: 10
  }
});

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    fontWeight: 'normal', // bold, 100-900
    fontStyle: 'normal', // italic
    color: '#333',
    textAlign: 'left', // center, right
    lineHeight: 24,
    letterSpacing: 1,
    textDecorationLine: 'none', // underline, line-through
    textTransform: 'none' // uppercase, lowercase, capitalize
  }
});

const styles = StyleSheet.create({
  box: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84
  }
});

const styles = StyleSheet.create({
  box: {
    elevation: 5
  }
});

<View style={[styles.box, styles.shadow, { backgroundColor: 'red' }]} />

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100
  },
  shadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  }
});

import { Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    width: width * 0.9,
    height: height * 0.5
  }
});