ReactNativeのStyles

React NativeのStyle

主にwith styled-components

Docs

View Style Props · React Native

基本↑は見ない

React Nativeでは、たとえstyled-componentsを使ったとしてもnth-child系のプロパティは使えないっぽい

code:tsx

const InputFieldWrap = styled.View`

padding: 20px 15px 10px;

width: 100%;

border-top-color: red;

border-top-width: 1;

// last-childだけスタイルを継承して新たにコンポーネント作るとか

const InputFieldWrapWithBottom = styled(InputFieldWrap)`

border-bottom-color: red;

border-bottom-width: 1;

右端に寄せる ref

Text

→text-aligin: right

VIew

✗ align-items: right

✗ justify-contnet: right

align-items: flex-end

中央

React NativeでViewの中央にViewを配置する方法 - Qiita

flex-directionでcolumnかrowを設定

defaultはcolumn

columnなら、justify-content: centerとすると縦方向の中央になる

rowなら、justify-content: centerとすると横方向の中央になる

flex-directionで設定したものと逆の方をcenterにしたければalign-items: centerを使う

幅の中央

text-arign: center;

Textの中で中央寄せ

margin: 0 auto

Viewの中で中央寄せ

高さの中央

align-self: center ?

テキストの中にリンクを入れるやつは一工夫いる

普通のhtmlならこんな風に書くやつ

code:html

<p>パスワードのお忘れの方は<span>こちら</span></p>

こんな風に書かないといけない

code:tsx

<View

style={{

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center'

}}

<Text>パスワードのお忘れの方は</Text>

<Anchor onPress={() => console.log('ページ遷移')}>こちら</Anchor>

</View>

Anchorは自作コンポーネント。TouchableOpacity>Text

上のコードのViewのところをTextにするのが直感的だが、そうするとエラーになる

参考

react native - How can I wrap a TouchableOpacity around Text within Text? - Stack Overflow

style-in-react-native

flex: -1とか