質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2709閲覧

React-Nativeの挙動を教えてください。

van-0215

総合スコア89

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/07/06 12:15

私はJavaScriptをあまり得意としていません、しかしながら訳あってJSのライブラリであるReact.js その中でもReactNativeを勉強中です。そのため、以下の質問はすごく初歩的なものかもしれませんが、ご回答いただけたら幸いです。

現在下記サイトを参考にReactNativeを勉強しています。
ReactNative勉強
サイト内の説明通りに以下のソースコードを書いて動作の確認をしたのですが、挙動がわかりません。(2つ目のソースコードは呼び出し元のApp.jsです)
教えていただきたいのは、「追加」buttonが押された後の具体的な動作フローです。
①「追加」buttonが押された
②_onPress()メソッド着火

**③this.props.onPress(this.ref._lastNativeText);
④this.ref.setNativeProps({ text: '' });
**

<③について>
onPressに引数を渡しているんですか? この1行には何の意味があるのですか?
_lastNativeTextとはどこで宣言されたのですか?

<④について>
値を設定しているっぽいのですが、どこに渡されているのですか???

javascript

1export default class TodoInput extends Component { 2 constructor(props) { 3 super(props); 4 5 this.ref = {}; 6 } 7 8 _onPress = () => { 9 this.props.onPress(this.ref._lastNativeText); 10 this.ref.setNativeProps({ text: '' }); 11 } 12 13 render() { 14 const { 15 onPress, 16 } = this.props; 17 18 return ( 19 <View style={styles.container}> 20 <TextInput 21 style={styles.textInput} 22 ref={(ref) => { this.ref = ref; }} 23 /> 24 <TouchableOpacity 25 style={styles.button} 26 onPress={this._onPress} 27 > 28 <Text style={styles.buttonText}>追加</Text> 29 </TouchableOpacity> 30 </View> 31 ); 32 } 33}

javascript

1export default class App extends Component<{}> { 2 _onPress = (text) => { 3 console.log(text); 4 } 5 6 render() { 7 return ( 8 <View style={styles.container}> 9 <View style={styles.main}> 10 <TodoInput onPress={this._onPress} /> 11 </View> 12 </View> 13 ); 14 } 15}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

**③this.props.onPress(this.ref._lastNativeText);
④this.ref.setNativeProps({ text: '' });
**

<③について>

onPressに引数を渡しているんですか? この1行には何の意味があるのですか?
_lastNativeTextとはどこで宣言されたのですか?

this.refの名前が少しややこしいかもですね。これはこのコードではTextInputコンポーネントをさしているのでthis.textInputRefのような変数名にすると少しわかりやすいかもしれないです。

それで、refはTextInputコンポーネントをさしていて、それに_lastNativeTextというメソッドを呼び出しています。 ReactNativeでは慣習としてインターナルなAPIには_のprefixをつけています。そのことからこれはTextInputで定義されていてかつドキュメントには記載されていないと推測できます。なのでこの場合コードを見にきます。これです: https://github.com/facebook/react-native/blob/master/Libraries/Components/TextInput/TextInput.js

無事_lastNativeTextがありました。どうやらTextInputに入力されたtextが入っているようです。

順番が前後しましたが、this.props.onPressを見たいと思います。

this.props.onPressとあるので、コンポーネントに渡されたpropsに存在するメソッドを呼んでいるとわかります。propsはコンポーネントが利用されているところでコンポーネントに渡されているはずです。ここではAppコンポーネントの <TodoInput onPress={this._onPress} />がそうです。TodoInputコンポーネントのonPresspropsにAppコンポーネントの_onPressメソッドが渡されています。

Appコンポーネントの_onPress定義を見てみると

_onPress = (text) => { console.log(text); }

とあるので、textを受け取ってconsoleに表示することをしています。

ので、buttonを押した後のフローはここまで

  1. 「追加」buttonが押された
  2. ToduInput_onPress()メソッド着火
  3. propsで渡されたonPressが呼ばれる。そのときonPressの引数はTodoInput内のTextInputが保持する文字(_lastNativeText)
  4. propsで渡されたonPressAppコンポーネントの_onPressの呼び出しであり、
  5. それは渡された文字をコンソールに表示する

となります。その後

6.TextInputの文字を空にする

があります。6については下に書きます。

<④について>

値を設定しているっぽいのですが、どこに渡されているのですか???

上述のように、TextInputのメソッドを呼び出しています。これについてはclearという公開されているメソッドがあるのでそちらを呼び出したほうがコードの安定性は増すはずです。

投稿2018/07/07 04:11

編集2018/07/07 04:12
taiki__t

総合スコア36

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

van-0215

2018/07/07 09:38

とても分かり易かったです!ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問