ReactNative-FlexBox

10983 ワード

react native テキストリンク

📌 ReactNativeでFlex

ReactNativeを使って画面を構成する場合、webとは少し違うところがあります.
つまり、flexを使って、携帯電話の画面でどれだけ使うかは、割合によって調整できます.
たとえば、App画面を正確に半分に分割するとします.

const App = () => {
	return(
    	<View style={styles.Wrapper}>
      		<View style={styles.Container01}></View>
      		<View style={styles.Container02}></View>
      	</View>
    )
  	const styles = styleSheet.create({
    	Wrapper: {
        	flex: 1
        },
        Container01: {
          flex: 1
        },
      	Container02: {
          flex: 1,
          backgroundColor: 'red'
        },
    })
}

以上の結果の画面を以下に示します.

スクリーン全体を囲む2479142は、スクリーン全体(flex:1)を使用した.
子供要素に入ったWrapperとContainer01は、親要素を1対1の割合で占めている.
それを活用すれば、こんなこともできる.

const App = () => {
  return (
    <>
    <View style={styles.Container}> 
    </View>

    <View style={styles.container2}>
      <View style={styles.button01}>
        <Text style={styles.menuFont}>Menu01</Text>
      </View>
      <View style={styles.button01}><Text>Menu02</Text></View>
      <View style={styles.button01}><Text>Menu03</Text></View>
      <View style={styles.button01}><Text>Menu04</Text></View>
    </View>
    </>
  )
}
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:'center',
  },
  container2: {
    flex: 0.1,
    flexDirection: 'row',
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent:'space-around',
  },
  button01: {
    width: '25%',
    display: 'flex',
    height: '100%',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  menuFont:{
    fontSize: 12,
  }
})
export default App;

Reference

この問題について(ReactNative-FlexBox), 我々は、より多くの情報をここで見つけました https://velog.io/@bu_du_dak/ReactNative-FlexBox

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

210106|白駿1712|C++

[Codility] MissingInteger