ReactNativeでドラクエ風の会話画面を作った

良いライブラリがあったのでそれの紹介になります。

タイプライターアニメーション

• react-native-typewriterを使いました

import { View } from 'react-native'
import TypeWriter from 'react-native-typewriter'

...(省略)...

<View style={styles.talkWrap}>
  <TypeWriter typing={1} style={styles.talk}>
    おぉ、目覚めたか？\n自分の名前は覚えておるか？
  </TypeWriter>
</View>

...(省略)...

const styles = {
  talk: {
    color: '#eee',
    fontWeight: 'bold',
  },
  talkWrap: {
    backgroundColor: '#000',
    borderColor: '#ccc',
    borderRadius: 15,
    borderWidth: 3,
    margin: 1,
    padding: 8
  },
}

フォームとエラー表示

• Native BaseのToastとFormを使いました
  • Toast
  • Form

Toast

import { Toast } from 'native-base'

...(省略)...

Toast.show({
  text: 'たしか６文字までの名前だったはずじゃ',
  type: 'danger',
  duration: 3000,
  textStyle: { fontWeight: 'bold' }
})

Form

import { Text, Item, Input, Icon } from 'native-base'

...(省略)...

const ToggleForm = ({ isError, name, handleChangeName }) => (
  isError ? (
    <Item error>
      <Text>名前:</Text>
      <Input value={name} onChangeText={handleChangeName} />
      <Icon active name="close-circle" />
    </Item>
  ) : (
    <Item success>
      <Text>名前:</Text>
      <Input value={name} onChangeText={handleChangeName} />
      <Icon active name="checkmark-circle" />
    </Item>
  )
)