我正在使用来自 react-navigation 的 TabNavigator 来浏览 3 个组件。我的 TabNavigator 组件如下所示:
import routeOnMap from '../screens/routsOnMap.js';
import meditatinWalk from '../screens/meditationWalk.js';
import newWordToWalkOn from '../screens/newWordToWalkOn.js';
import * as firebase from 'firebase';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
NavigationActions,
TabNavigator,
TabBarBottom,
} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default TabNavigator(
{
MeditatinWalk: { screen: meditatinWalk },
NewWordToWalkOn: { screen: newWordToWalkOn },
RouteOnMap: { screen: routeOnMap },
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'MeditatinWalk') {
iconName = `ios-walk${focused ? '' : '-outline'}`;
} else if (routeName === 'NewWordToWalkOn') {
iconName = `ios-add-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'RouteOnMap') {
iconName = `ios-map${focused ? '' : '-outline'}`;
}
// You can return any component that you like here! We usually use an
// icon component from react-native-vector-icons
return <Ionicons name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#626A41',
inactiveTintColor: 'gray',
},
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
我想重新渲染我的 NewWordToWalkOn 组件中的内容,当它被按下/标签时。我想重新渲染的代码是 NewWordToWalkOn 组件中 componentDidMount() 方法中的内容。
//imports
export default class NewWordToWalkOn extends Component {
constructor() {
super()
this.state = {
words: [],
};
}
static navigationOptions = ({ navigation }) => ({
title:
<Text style={{ fontWeight: 'bold', color: '#626A41'}}> Vælg nye ord at vandre på </Text>,
headerLeft: null,
headerRight:
<TouchableOpacity
style={{ flex: 1, alignItems: 'center', justifyContent: 'center', marginRight: 10 }}
onPress={ () => MeditatinWalk._logout() }>
<Text
style={{ fontWeight: 'bold', color: '#626A41'}}>
Log ud
</Text>
</TouchableOpacity>
});
componentDidMount() {
//code that needs rerendered
}
render() {
)
return (
<ScrollView style={styles.wrapper}>
//all the elements
</ScrollView>
);
}
}
任何建议如何重新渲染?