ReactNativeのStyles
Docs
基本↑は見ない
tsxconst 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;
`;
Text
→ text-aligin: right
VIew
✗ align-items: right
✗ justify-contnet: right
align-items: flex-end
中央
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ならこんな風に書くやつ
html<p>パスワードのお忘れの方は<span>こちら</span></p>
こんな風に書かないといけない
tsx<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}
>
<Text>パスワードのお忘れの方は</Text>
<Anchor onPress={() => console.log('ページ遷移')}>こちら</Anchor>
</View>
Anchor は自作コンポーネント。 TouchableOpacity>Text
上のコードのViewのところをTextにするのが直感的だが、そうするとエラーになる
参考
flex: -1 とか