我试图通过简单点击按钮来启动模态，但无论出于何种原因，模态似乎都没有启动
import React, { PropTypes } from 'react'
import { View, Alert, ScrollView, Text, Modal, TouchableHighlight } from 'react-native'
import { connect } from 'react-redux'
import Actions from '../Actions/Creators'
import { Actions as NavigationActions } from 'react-native-router-flux'
import CartRow from '../Components/CartRow'
import CartTotal from '../Components/CartTotal'
import RoundedButton from '../Components/RoundedButton'
// Styles
import styles from './Styles/CartAndCheckoutStyle'
class CartAndCheckout extends React.Component {
constructor (props) {
super(props)
this.state = {
modalVisible: false
}
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
console.log(visible)
}
static propTypes = {
items: PropTypes.array,
}
render () {
return (
<View style={styles.container}>
<View style={styles.currentBalance}>
<Text style={styles.currentBalanceTitle}>CURRENT BALANCE</Text>
<Text style={styles.currentBalanceAmount}>$0.00</Text>
</View>
<ScrollView>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {Alert.alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
</View>
</View>
</Modal>
<View style={styles.cartItems}>
{(this.props.items||[]).map((section,i) => (
<CartRow key={i} action={this.setQty} index={i} element={section} />
))}
</View>
<CartTotal items={this.props.items||[]} />
</ScrollView>
<RoundedButton onPress={()=>{this.setModalVisible(true)}} text='Place Order' />
</View>
)
}
}
CartAndCheckout.propTypes = {
updateCart: PropTypes.func,
}
const mapStateToProps = (state) => {
return {
// items: state.cart.items,
}
}
const mapDispatchToProps = (dispatch) => {
return {
updateCart: (index,qty) => dispatch(Actions.updateCart(index,qty)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CartAndCheckout)
答案 0 :(得分：0)
我认为问题是<RoundedButton>位于var lowerTorso: SKNode!
var upperTorso: SKNode!
var upperArmFront: SKNode!
var lowerArmFront: SKNode!
var upperArmBack: SKNode!
var lowerArmBack: SKNode!
var fistFront: SKNode!
var cricketBat: SKNode!
var bottom: SKNode!
let upperArmAngleDeg: CGFloat = 10
let lowerArmAngleDeg: CGFloat = 150
let batAngleDeg: CGFloat = 270
override func didMove(to view: SKView) {
physicsWorld.contactDelegate = self
physicsWorld.gravity = CGVector(dx: 0, dy: -20)
physicsWorld.speed = 0.1
//2
lowerTorso = childNode(withName: "torso_lower")
upperTorso = lowerTorso.childNode(withName: "torso_upper")
upperArmFront = upperTorso.childNode(withName: "arm_upper_front")
lowerArmFront = upperArmFront.childNode(withName: "arm_lower_front")
upperArmBack = upperArmFront.childNode(withName: "arm_upper_back")
lowerArmBack = upperArmBack.childNode(withName: "arm_lower_back")
cricketBat = lowerArmFront.childNode(withName: "cricketBat")
fistFront = cricketBat.childNode(withName: "fist_front")
let joint = SKPhysicsJointPin.joint(withBodyA: upperArmFront.physicsBody!,
bodyB: lowerArmFront.physicsBody!,
anchor: CGPoint(x: upperArmFront.frame.midX, y: upperArmFront.frame.midY))
physicsWorld.add(joint)
let joint2 = SKPhysicsJointPin.joint(withBodyA: lowerArmFront.physicsBody!,
bodyB: cricketBat.physicsBody!,
anchor: CGPoint(x: lowerArmFront.frame.maxX, y: lowerArmFront.frame.maxY))
physicsWorld.add(joint2)
/*
lowerArmFront.reachConstraints = SKReachConstraints(lowerAngleLimit: CGFloat(50).degreesToRadians(), upperAngleLimit: 160)
upperArmFront.reachConstraints = SKReachConstraints(lowerAngleLimit: CGFloat(-90).degreesToRadians(), upperAngleLimit: CGFloat(120).degreesToRadians())
lowerArmBack.reachConstraints = SKReachConstraints(lowerAngleLimit: CGFloat(50).degreesToRadians(), upperAngleLimit: 160)
upperArmBack.reachConstraints = SKReachConstraints(lowerAngleLimit: CGFloat(0).degreesToRadians(), upperAngleLimit: CGFloat(10).degreesToRadians())
*/
}
func punchAt(_ location: CGPoint) {
// 1
let punch = SKAction.reach(to: location, rootNode: upperArmFront, duration: 0.1)
/*
// 2
let restore = SKAction.run {
self.upperArmFront.run(SKAction.rotate(toAngle: self.upperArmAngleDeg.degreesToRadians(), duration: 0.1))
self.lowerArmFront.run(SKAction.rotate(toAngle: self.lowerArmAngleDeg.degreesToRadians(), duration: 0.1))
self.cricketBat.run(SKAction.rotate(toAngle: self.batAngleDeg.degreesToRadians(), duration: 0.1))
}
*/
fistFront.run(punch)
// 3
//fistFront.run(SKAction.sequence([punch, restore]))
}
// 3
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
touched = true
for touch: AnyObject in touches {
location = touch.location(in: self)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
location = touch.location(in: self)
}
}
内。它应该作为ScrollView的兄弟放置。尝试将模态放在JSX中的`public class MainActivity extends AppCompatActivity implements OnDataPointListener,
GoogleApiClient.ConnectionCallbacks,
GoogleApiClient.OnConnectionFailedListener {
private static final int REQUEST_OAUTH = 1;
private static final String AUTH_PENDING = "auth_state_pending";
private boolean authInProgress = false;
private GoogleApiClient mApiClient;
private ProgressBar progressBar;
private Value progressStatus = 0;
private Handler handler = new Handler();
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState != null){
authInProgress = savedInstanceState.getBoolean(AUTH_PENDING);
}
mApiClient = new GoogleApiClient.Builder(this)
.addApi(Fitness.SENSORS_API)
.addScope(new Scope(Scopes.FITNESS_ACTIVITY_READ_WRITE))
.addConnectionCallbacks(this)
.addOnConnectionFailedListener(this)
.build();
}
@Override
protected void onStart(){
progressStatus = 0;
super.onStart();
mApiClient.connect();
}
@Override
public void onConnected(Bundle bundle) {
DataSourcesRequest dataSourceRequest = new DataSourcesRequest.Builder()
.setDataTypes( DataType.TYPE_STEP_COUNT_CUMULATIVE )
.setDataSourceTypes( DataSource.TYPE_RAW )
.build();
ResultCallback<DataSourcesResult> dataSourcesResultCallback = new ResultCallback<DataSourcesResult>() {
@Override
public void onResult(DataSourcesResult dataSourcesResult) {
for( DataSource dataSource : dataSourcesResult.getDataSources() ) {
if( DataType.TYPE_STEP_COUNT_CUMULATIVE.equals( dataSource.getDataType() ) ) {
registerFitnessDataListener(dataSource, DataType.TYPE_STEP_COUNT_CUMULATIVE);
}
}
}
};
Fitness.SensorsApi.findDataSources(mApiClient, dataSourceRequest)
.setResultCallback(dataSourcesResultCallback);
}
private void registerFitnessDataListener(DataSource dataSource, DataType dataType) {
SensorRequest request = new SensorRequest.Builder()
.setDataSource( dataSource )
.setDataType( dataType )
.setSamplingRate( 3, TimeUnit.SECONDS )
.build();
Fitness.SensorsApi.add( mApiClient, request, this )
.setResultCallback(new ResultCallback<Status>() {
@Override
public void onResult(Status status) {
if (status.isSuccess()) {
Log.e( "GoogleFit", "SensorApi successfully added" );
}
}
});
}
@Override
public void onConnectionSuspended(int i) {
}
@Override
public void onConnectionFailed(ConnectionResult connectionResult) {
if(!authInProgress){
try{
authInProgress = true;
connectionResult.startResolutionForResult( MainActivity.this,REQUEST_OAUTH);
} catch (IntentSender.SendIntentException e){}
}else {
Log.e( "GoogleFit" , "authInProgress" );
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if( requestCode == REQUEST_OAUTH ) {
authInProgress = false;
if( resultCode == RESULT_OK ) {
if( !mApiClient.isConnecting() && !mApiClient.isConnected() ) {
mApiClient.connect();
}
} else if( resultCode == RESULT_CANCELED ) {
Log.e( "GoogleFit", "RESULT_CANCELED" );
}
} else {
Log.e("GoogleFit", "requestCode NOT request_oauth");
}
}
@Override
public void onDataPoint(DataPoint dataPoint) {
for( final Field field : dataPoint.getDataType().getFields() ) {
final Value value = dataPoint.getValue( field );
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(getApplicationContext(), "Field: " + field.getName() + " Value: " + value, Toast.LENGTH_SHORT).show();
}
});
progressBar = (ProgressBar) findViewById(R.id.progressBar3);
textView = (TextView) findViewById(R.id.textView);
new Thread(new Runnable() {
@Override
public void run() {
while (progressStatus){
progressStatus = value;
handler.post(new Runnable() {
public void run() {
progressBar.setProgress(progressStatus);
textView.setText("Progress:"+progressStatus+"/"+progressBar.getMax());
}
});
}
try{Thread.sleep(100);}
catch (InterruptedException e){
e.printStackTrace();
}
}
});
}
}
@Override
protected void onStop() {
super.onStop();
Fitness.SensorsApi.remove( mApiClient, this )
.setResultCallback(new ResultCallback<Status>() {
@Override
public void onResult(Status status) {
if (status.isSuccess()) {
mApiClient.disconnect();
}
}
});
}
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putBoolean(AUTH_PENDING, authInProgress);
}
之后。由于Modal创建了一个全屏视图，因此无需将其放在ScrollView中。
答案 1 :(得分：0)
您正在使用react-native-router-flux，但您没有向我们展示场景设置。如果你查看（https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#modals）文档，你会看到
＆＃39;要显示模态，请使用模态作为根渲染器，因此它会将第一个元素渲染为普通场景，将所有其他元素渲染为弹出窗口（当它们被推动时）。例如：＆＃39;
import StatusModal from './components/StatusModal'
<Router>
<Scene key="modal" component={Modal} >
<Scene key="root">
<Scene key="screen1" initial={true} component={Screen1} />
<Scene key="screen2" component={Screen2} />
</Scene>
<Scene key="statusModal" component={StatusModal} />
</Scene>
</Router>
您不应该在组件中深层渲染模态。你需要一个围绕root的模态场景包装器，你可以在其中将任何模态场景作为同义词嵌入root。