React Native と expo の tips 自分用
tipsが多くバラバラに上げるのもあれなので整理。
自分がハマったところ(勘違いやミスりそうなこと)が多く技術的なことは少なめかも。
TouchableOpacityのonPressが自動で動いてしまうのを止めさせる。
これは自動で動いてしまう。(コード的にもNGのようだ)
TouchableOpacity onPress={this.function(item)}
こちらは自動で動かない。(こちらが正しい)
TouchableOpacity onPress={() => this.function(item)}
stackoverflowのスレにも書かれているけれども、
renderされた時に、関数を呼び出して結果を返そうとするみたいだ。
Buttonの場合は、上の書き方でよろしい。
勘違いするとハマる…。
外部コンポーネントのrenderItemに要素を渡す場合
<FlatList
renderItem={({item}) => <ImportRenderItem item={item} />}
/>
親のfunctionを子コンポーネント Buttonで発火させる。
_onPush = () => {
console.log('push button')
}
// render内
// ハマりどころはここで(actionを)onPressにしちゃわないこと
<ChildButton action={this._onPush}/>
class ChildButton extends React.Component {
render() {
return (
<Button title="button" onPress={this.props.action} />
)
}
}
注:functional componentのときは
<FunctionalButton action=this._onPush />
const FunctionalButton = (props) => {
render() {
return (
<Button title="button" onPress={props.action} />
)
}
}
Functional側でthisが無いってだけなんだけれど、propsで受けているから当然だよね。
HotReloadなどでソースの変更が反映されない場合の対処法
端末がホワイトアウトして、変更が反映されているように見えるけれどbuild失敗している。
Failed building JavaScript bundle.
って、conosoleなりに表示され、加えて失敗している原因も表示されているので、落ち着いて対処しましょう。
react-native-navigationでScreen情報を取得
//遷移先にて
this.props.navigation.state.routeName
snapshotから値を取りたいのにPromiseが返ってくる時
Promise {_40: 0, _65: 0, _55: null, _72: null}
こんな感じで。
対策としては、async/awaitなどして値をとってください。
Invariant Violation: Tried to get frame for out of range index NaN
FlatListのdataはarrayだけだぜ?object渡していないかい?
app.jsonを使う
app.json = Constants.manifest
Constants.manifest以下はexpo配下になる。
{
"expo": {
"name": "app_name",
}
}
console.log(Constants.manifest.name) // app_name
Author And Source
この問題について(React Native と expo の tips 自分用), 我々は、より多くの情報をここで見つけました https://qiita.com/i47_rozary/items/1a43c7bc8d1fcefb9061著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .