React Native:如何动态更改<text>值

时间:2016-12-14 09:58:08

标签: react-native

我想在某个事件中动态更改值

事件:

BackgroundGeolocation.on('location', (location) => {      
    currentDistance =  distance(previousLatitude,previousLongitude,latitude,longitude);

            this.setState({
                text: currentDistance                
            });                                   

    });
<Text>
   Moving : {this.state.text}
</Text>

有没有人知道如何更改文字或任何其他方法来实现?

2 个答案:

答案 0 :(得分:29)

下面是一个示例,它使用状态在单击时动态更改文本值。您可以根据需要设置任何事件。

import React, { Component } from 'react'
import {
   Text,
   View
} from 'react-native'

export default class reactApp extends Component {
   constructor() {
      super()
      this.state = {
         myText: 'My Original Text'
      }
   }
   updateText = () => {
      this.setState({myText: 'My Changed Text'})
   }
   render() {
      return (
         <View>
            <Text onPress = {this.updateText}>
               {this.state.myText}
            </Text>
         </View>
      );
   }
}

答案 1 :(得分:7)

使用:

    public class HandleListClick extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_handle_list_click);
            Intent intent = getIntent();
            int pos = intent.getIntExtra("POSITION",0);
            getItemPosition(pos);
        }


        public void getItemPosition(int position) {
            switch (position) {
                case 0:
                    Fragment6 frag6 = null;
                    frag6 = new Fragment6();
                    FragmentManager fragmentManager = getSupportFragmentManager();
                    fragmentManager.beginTransaction()
                            .replace(R.id.framelayout, frag6)
                            .commit();


            }
        }
    }

而不是:

<TextInput editable={false} ref={component=> this._MyComponent=component}/> 

然后你可以这样改变文字:

<Text></Text>